on Brains

Using the Google Font API

Last month Google unveiled its Font API, which makes custom font usage on your web page a snap. I talked about using @font-face before, and it isn’t terribly hard to use your own fonts that way. But doing it through Google’s Font API has a number of advantages:

  • Google hosts the fonts, so they'll load faster.
  • If your visitor had been to any site using the same Google font you used, it'll be cached.
  • You don't have to give the font license the evil eye.
  • You don't have to convert your fonts to different formats for different browsers (i.e. EOT for IE is covered).
  • It's even easier than doing it by hand.

The Google font directory includes 18 fonts to start with, and for the most part they are top notch. You’ve got good fonts for body text like Droid, and number of good fonts for headers.

How easy is it? Say you want the Droid Sans font for your web page. Put this in your header:

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

Now style your page element with that font.

1
p { font-family: 'Droid Sans', arial, serif; }

And you’re done. Now let’s say you want to use Droid Sans and Cantarell. Change your Font API call to this:

1
2
<link  rel='stylesheet' type='text/css'
href='http://fonts.googleapis.com/css?family=Droid+Sans|Cantarell'>

All set.

1
2
3

p { font-family: 'Droid Sans', arial, serif; }
h1 { font-family: 'Cantarell', arial, serif; }

A number of the fonts have variants, like bold, italic, and bold italic. You can get those as well in the link request.

1
2
<link  rel='stylesheet' type='text/css'
href='http://fonts.googleapis.com/css?family=Cantarell:italic,bolditalic'>

You can also grab the fonts in your stylesheet rather than the document head with @import.

1
@import url(http://fonts.googleapis.com/css?family=Cantarell);

Super easy stuff, and it’ll make your web pages distinctive without using heavy, SEO killing images. Just don’t go nuts with custom fonts. Besides the fact you shouldn’t use more than a couple of fonts per page for typographic consistency, they aren’t free in terms of bandwidth. At the time of this posting I’m using Yanone Kaffeesatz for the header text and post titles.