Using Custom/Nonstandard Fonts With Google Font API

Let’s face it, the choice of fonts you can use in your blog or web page is rather limited. While you may have tons of fonts installed in your computer, that doesn’t mean you can use all of them. Well, technically you can apply them in your blog, but what your readers see is limited to only the fonts installed in their computers.

That is why Blogger plays it safe by integrating only (web-safe) fonts commonly available in most computers -Arial, Courier, Georgia, Impact, Times New Roman, Trebuchet and Verdana.

Now that’s not much of a choice isn’t it?

Well that's about to change, with Google font API. What fonts your readers have or do not have in their computers no longer matters. The API uses fonts that are hosted by Google. This paragraph shows what it can do. Just so you know, I use a font called Reenie Beanie.

Update Dec. 2010 
Blogger has integrated Google web fonts into Template Designer.

Applying Google’s web font is easy: just add a special stylesheet link in your blog template HTML, then use the font in a CSS style.

Here’s how you can apply the fonts to your blog:

1. Go to Google font Directory for a list of available fonts.
2. Click on a font to view the font details.
   • Go to Font Previewer if you want to test the effect of various text properties (font-size, spacing, caps, shadow etc.) on the font.
   
3. To get the code, click blue Get the Code tab on the right.
4. Tick the checkboxes for the variants (if the font has variants that is) you want to use before copying the code. The looks something like this: 
   

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

5. Before using the code, add a slash right before the closing bracket, like this: 
   

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

6. Then copy the code and paste it right before the </head> tag in your template.
7. To apply the font, just go to Design > Edit HTML and insert a CSS code snippet right before ]]></b:skin> line in your template. This snippet:  
   
   view sourceprint?

   1	.post-title { font-family: 'Reenie Beanie', verdana,arial !important;}

   for example, will apply Reenie Beanie font to your post titles. 
   
   (For Designer template, you can also add the snippet from within the Template Designer.)
8. Preview before saving.

Only add the fonts you plan to use. Adding unused fonts would burden your blog with an unnecessary load.

At the time of writing this post, Google font Directory has 18 font families 
-Cantarell, Cardo, Crimson Text, Droid Sans,Droid Sans Mono, Droid Serif, IM Fell, Inconsolata, Josefin Sans Std Light, Lobster, Molengo, Nobile, OFL Sorts Mill Goudy TT, Old Standard TT, Reenie Beanie, Tangerine, Vollkorn and Yanone Kaffeesatz. 
Let us hope more will be added in future.

To use custom fonts for short texts i.e. for headings, you can also use another method -create a image of the text, then embed it in your template HTML.

Enjoy!