Google Web Fonts CSS3

Before Google fonts it was very hard to use different font styles, designer/developers were stick to use Arial, Georgia, Verdana, Times New Roman - web-safe fonts that a majority of web users have installed on their computer. Now with the Google Web Font API is becoming an excellent source to find and easily import fonts. The directory, as of now contains over 573 font families listed freely. Using CSS or Javascript you can import and embed any of these fonts on your Website or WordPress installation.

To use a font you first need to find a suitable font for this you have to go to http://www.google.com/webfonts

find a font and click on Quick-Use

from there you will three different options to embed code on your site, use the standard method that make use of <style> tag, other option is @import directive, @import is not supported by some older browser versions, and it has also been shown the be less efficient than using the <style> tag to include stylesheets, thirdly there is a javascript option which should only be used if you have special requirements like loading a special font on demand, etc. We will use the standard option for this tutorial, copy the whole text and paste in the HEAD of the HTML page.

<link href='http://fonts.googleapis.com/css?family=Happy+Monkey' rel='stylesheet' type='text/css'>

Now that we have successfully import our "Happy" font in our page we now need a simple CSS to use it.

.myPreciousClass{
 font-family:'Happy Monkey', cursive;
 /* Place your font name in single quotes
       and declare a font to fall back on */
}

Use the class and you should get results somthing like this.