Hello Google Font Directory

I was minding my own business after another lost weekend when I opened up my feedly after a few days and up popped a post from the Google Code Blog announcing the Google Font API and Font Directory. It looked pretty neat, so I decided to give it a closer look.

Using new browser support for web fonts as part of the CSS3 @font-face standard, what Google has put together an “API” of sorts makes it very simple to incorporate a set of open source fonts that have been commissioned and submitted to their directory. And when I say very simple, I mean it’s just doing the same thing than any web designer or developer has been doing for years: CSS.  Here’s the painless 2-step process:

1. Add a stylesheet reference using the link tag in the head of your HTML document, pointing to the Google resource below and referencing the font name you want to use.
   http://fonts.googleapis.com/css?family={font-name}
2. Then, all you have to do is reference the font name using CSS just like you would any other font.
   font-family: 'Tangerine', serif;

That’s literally it, and you can use any of the dozen or so fonts in the Google Font Directory that will surely grow over time.

In Action

Wanting to try it out, I went ahead and threw the new markup over at my Kris and Cindy site as the site header text.  Take a look:

All that is there for that just a normal H1 tag and the CSS referenced above.  Comparing that to the graphic logo that I was using on the previous version of the site:

It has a different feel to it, but I still like it.  Plus, the reference stylesheet that is required for the font I chose – Tangerine – is only 181 bytes in size.  Compare that to the logo graphic that was originally 7KB, and you see quite a difference.

Plus, the fact that it’s hosted by Google means it’s their bandwidth (big whoop) but also that once a visitor caches that file for one site, it’s cached for all other sites that use it, too.  That’s a bigger benefit in my book than just the bandwidth savings.

More Time to Play

It will be interesting to see just how many new fonts get added in the next few months, and where we might see some of these pop up around the web.

For me, I still need to find more time to play around with these, and there are a few other sites of mine that could use a little typography tweaking other than just site headers.  Like anything else, it will be good to have some fun with this.