Fonts are very important factor in web design, fonts are responsible for readability, and well designed text for your websites. When we go to tradition definition, fonts are the composition of a complete character sets of a particular size and style of a typeface. A font family may consist of many fonts of same typeface having size or style variety. Late in the year 2010, Google launched its font service naming Google Web Fonts, which provides Google Font API for developers to design new fonts, and submit it to Google font directory for enlisting. By launching Google Fonts, Google aids for making web faster, and delivering the lowest possible latency to its users.
This article provides the complete guide about how to use google fonts into your website, and some performance tips to make your website faster. First you need to choose a font from the available 271 google fonts ( at the time of this article), then follow the following procedure to enable google font for your website –
After choosing your favorite font, click on the ‘Quick Use’ link which will navigate you to a page which will have all the required code you need to add into your website. First it will show you how much time this font will cost your page load, then go to the second option and choose the character sets you want. In 3rd section of the page you will find the <link> tag which you need to place into head section of your HTML page. That’s it, your desired Google font is ready to be used in your website, just set the font-family option into your style sheet.
Following are some guidelines, which should be consider while using Google Fonts into your website –
1) Use all the desired fonts into single <link> tag, instead of using separate one for all of the fonts. For example instead of using 2 tags for the 2 fonts as follows
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Droid+Sans”>
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Lobster”>
use the following pattern –
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Droid +Sans|Lobster”>
2) Don’t use @import into CSS file to link another style sheets, use separate <link> tags for each CSS file for better performance of your website.
3) You should use ‘link’ tag of Google Font API before any script tag, because, if there’s a script tag before the @font-face declaration, your browser won’t render anything on the page until the font file is done downloading.
4) If you don’t actually use a font, don’t request it in the API. You might miss this if you do your testing in Firefox or Chrome, which only load the font files needed to render the text on the page. Internet Explorer, by contrast, loads all the fonts requested, even if they’re not actually used.
5) Use webpagetest.org, which runs your page in an instrumented IE browser, and displays waterfall graphs and other information. It’s also a great idea to use the “Inspect Element” resource graphs in Chrome.
6) To reduce the Google web font size, you might use ‘text=’ feature which optimize your web font request to only desired text of string instead of returning the whole font file. following is the syntax to use this feature –
<link href=’http://fonts.googleapis.com/css?family=Special+Elite&text=MyText’ rel=’stylesheet’ ype=’text/css’>
Here MyText is your desired string of text on which you want to use Google Font. The effect of this feature is even more pronounced on mobile devices, where connection speeds are limited. Using the text= parameter, you can ensure your users will have a great, quick loading experience.
The Google Font API now serves roughly more than 90 million daily requests, across roughly 1500,000 unique websites. Google Fonts now work for the vast majority of mobile devices, including Android 2.2+ devices, iPhone and iPad! And now with the recent release of iOS5, even non-latin scripts like Greek will render beautifully on the iPad and iPhone. One of the biggest benefits of using the Google Font API is that the service removes the nuances involved with rendering web fonts correctly across all devices and platforms. As a user, you can simply choose which font you’d like, and Google will take care of the rest.
