Using custom fonts in Web Pages!
All these days we were using the standard fonts in our web pages, and it takes up only those fonts which are already available in our system. But now, we can make use of many services to render fonts, which are not installed in the client systems.
One such service is Google Web Fonts. They have a beautiful Google Fonts API, which allows you to hotlink the font files, which renders the desired font online. So, basically what is the way you can use it in your web sites or web pages? Answer is simple. Either use a small JavaScript code or link to an external CSS file! 😀 Through URL parameters, you specificity which fonts you want, and what variations of those fonts.
You need to specify the parts, which uses the font by giving it in the CSS this way:To do the same thing for advanced users, by inserting a JavaScript code, which is the Google FontLoader. The FontLoader has some advantages over CSS, the main one is the avoiding of FOUT (Flash of Unstyled Text), but has a disadvantage that, if the users have disabled scripting, this method won't work! FontLoader can be used this this way:
One such service is Google Web Fonts. They have a beautiful Google Fonts API, which allows you to hotlink the font files, which renders the desired font online. So, basically what is the way you can use it in your web sites or web pages? Answer is simple. Either use a small JavaScript code or link to an external CSS file! 😀 Through URL parameters, you specificity which fonts you want, and what variations of those fonts.
Here, we have specified three fonts, namely Asap, Lacosta, and Droid Sans. We have an option to also specify the variations like what weights, and styles. By default this renders the normal variant. For Asap, we have specified bold and bold italic versions, for Lacosta, just italic and Droid Sans just the normal font.
You need to specify the parts, which uses the font by giving it in the CSS this way:To do the same thing for advanced users, by inserting a JavaScript code, which is the Google FontLoader. The FontLoader has some advantages over CSS, the main one is the avoiding of FOUT (Flash of Unstyled Text), but has a disadvantage that, if the users have disabled scripting, this method won't work! FontLoader can be used this this way:
The FontLoader comes with a small StyleSheet. You can see two styles like .wf-loading and .wf-active. This makes the text to be invisible during the font loading. After the font is loaded, it makes the font visible and this way it prevents FOUT!
Replies
-
PraveenKumar PurushothamanAnother better way, not to rely on external Google's servers, when you are going to use it inside a private network or offline, you can go with this method. There is a website called Free Fonts! Legit Free & Quality » Font Squirrel, which does the same thing as Google Fonts API do. But, the advantage here is, you are allowed (and supposed) to download the fonts and its dependant files to your web server and you SHOULD NOT hotlink files from their servers.
This in turn is helpful, because, all the fonts will be available in your own server and you don't need to rely on Google's server or any other server and another main thing is that you can showcase these in offline, when there is no internet connection! This is not possible via Google Fonts because it relies on the Google's servers online.
You can get @font-facekits downloaded from this website, which is a zip file with the font files, a stylesheet, and a demo HTML file to get started with. The structure of a typical @font-face kit would be this way:[fontname]-fontfacekit.zip |- stylesheet.css |- demo.html |- license.txt |- [fontname]-webfont.eot |- [fontname]-webfont.svg |- [fontname]-webfont.ttf |- [fontname]-webfont.woff
After including stylesheet.css file with your HTML page, you can use the font using font-family CSS attributes. No more restriction to fonts. If you have a custom font, you can use their @font-face kit generator and get the kit and use it as a web font! Cheers!!! 😀
You are reading an archived discussion.
Related Posts
Hi this is SAGAR PANDA studying in final year of B.E(TRADE-Computer Engineering) from Pune University.My current location is Pune.
*Hobbies & Interests: Writing,surfing intrnet.
*Aim in life: (if applicable 😁...
where should i put database(mysql) on webspace(server) and how to launch wesite created in jsp tec
Introduction
This is a big issue in many of the Websites. First lets see what is FOUC! The style part of a website is given by CSS. It contains all...
Name:maryam omowuumi lawal
*Engineering Trade:
computer science
*Occupation:
student
*Hobbies & Interests:
reading and travelling
*Aim in life:
to be a great computer scientist
*I joined CrazyEngineers because:
i want...
Please i need you to suggest topics for my final year project.