Google’s free font directory is made a revolution in the web typography. The amazing rise of this new font resource has made web designers to program the site suitable for the web fonts. Google Web Fonts makes it easy to compare and choose and gives you all the code you need to embed the font via html, Javascript or CSS. There are 521 fonts (and is steadily growing) are available in this time, you can easily include it in your project.
The hundreds of free, open-source fonts is specially optimized for the web. You have to enable them on your site using just a three steps process which generates a good looking website. Now web designers want font families, not just fonts. There are some web fonts available, but many designers and web developers have waived them, because of lack of browser-support and problems with the copyrights of many fonts.
Google web fonts provide easiest way to integrate the fonts with your project. First thing is open the Google Web Fonts website and select the font that you want to use. Once decided the font click on the bottom right on ‘Use’ and it displays the necessary codes that you want to add in your site to display contents using the fonts.
Add this code to your website:
Add the generated code in the header of your website. Alternatively you can also download the fonts above the left and place it on your own webspace.
<link href=’http://fonts.googleapis.com/css?family=Oranienbaum’ rel=’stylesheet’ type=’text/css’>
or
you can also use @import or can use Javascript, if we use @import ;
@import url(http://fonts.googleapis.com/css?family=Oranienbaum);
Integrate the fonts into your CSS:
Now you need ad some code to your CSS file. The Google Web Fonts API will generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your CSS styles.
font-family: ‘Oranienbaum’, serif;
But there is a problem with this web fonts. The Internet-Explorer only supports the TTF format from version 9. Therefore you must include all three formats of Web-Fonts, to ensure that every visitor can see the right fonts on your website. You can integrate web fonts using the tutorial available in thomas.deuling.org. there are some popular Google Font combinations available like: Oswald and Lora, etc..
If you are using wordpress you can use this free plugin. The WP Google Fonts plugin allows you to easily add fonts from the Google Font Directory to your WordPress theme.
The font plugin solutions like FontBurner.com have helped webdevelopers to bring nice typography to WordPress themes but the selection of fonts is limited. The WP Google Font plugin makes it easier to use Google’s free font service to add high quality fonts to your WordPress powered site. Not only does this plugin add the necessary Google code, but it also gives you the ability to assign the Google fonts to specific CSS elements of your website from within the WordPress admin. You can also target the Google fonts from your own theme’s stylesheet. There are some more plugins of the same kind is available in wordpress. You can also Download WP Google fonts.
Google also provided a guide explains how to use the Google Web Fonts API to add web fonts to your pages. You don’t need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style.
Tip: Using many font styles can slow down your webpage, so only select the font styles that you actually need on your webpage.
