Using custom/nonstandard fonts with Google Web Fonts 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 apply the font in a CSS stylesheet.

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:
   

   <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:
   

   <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, go to Template > Edit HTML and insert a CSS rule right before ]]></b:skin> line in your template. The following CSS rule for example, will apply Reenie Beanie font to your post titles:
   

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

   (For Designer templates, you can also add CSS rules / code snippet via 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 fonts 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!