Quick start to the Google Web Fonts API

I recently started playing around with Google Web Fonts, and I must say it truly is a slick solution of empowering web developers with quick access to a highly extended library of open source fonts.

The days of being limited by Arial, Times New Roman, Georgia, Verdana and just a few more standard typefaces may have finally come to an end. @font-face is an alternative way of implementing custom typography in web design, but this is somewhat more difficult and cumbersome to carry out. However, if you need premium typefaces @font-face, together with the paid service Typekit may be good solutions.

Implementing Google Web Fonts into your project is a piece of cake. Just browse around the Google Web Fonts page to find a typeface you like. Add the following code to your html file and replace “Tangerine” with whatever typeface you would like to use. If the typeface name consists of multiple words, just use a plus sign in between them: Kaushan+Script.

[xml]
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
[/xml]

To start using the a font in your css code, just define it as you normally would. Remember not to forget fallback typefaces.

[css]
body {
font-family: ‘Tangerine’, serif;
font-size: 48px;
text-shadow: 4px 4px 4px #aaa;
}
[/css]

That’s it! To get get more detailed information on using the Google Web Fonts API check out the links below.

https://developers.google.com/webfonts/docs/getting_started
https://developers.google.com/webfonts/docs/webfont_loader