Steve Fenton

<< April | May | June >>

Thursday, 20th May 2010

Almost every web designer has had to solve this problem at some point in time. You want (or are required) to use a custom font somewhere on a web page. Solutions in the past have included creating an image with the text in (nasty), using a flash movie that has the font embedded, using a JavaScript fiddle (often in conjunction with an image or flash movie) or using an extra-long CSS font list to make sure something appears that looks a bit like it.

Well that has all changed now that Google has created the new Google Font Directory.

To illustrate how easy this is to use, here is a before and after example of how to switch out your boring Arial, Verdana, Helvetica, Sans-Serif definition with something a bit more spicy.

Before and After

This is the before - oh how boring are these fonts.

h1 {
    font-family: Arial, Helvetica, Sans-Serif
}

And this is the after - not very difficult at all.

@import url(http://fonts.googleapis.com/css?family=Droid+Sans);
h1 {
    font-family: 'Droid Sans', Arial, Helvetica, Sans-Serif
}

It's so easy to do, I've already added it to this website so you can see it in action - all of the headings are now using the Droid Sans font by Steve Matteson. Doesn't the site look better already! There is already a small collection of fonts, some more exotic offerings as well as some nice alternatives to Georgia's serify domination and Arial's sans-serif world order.

Page Impact

Using the example above has very little impact on your page. This is the most basic example and costs just 26kb (served from Google's content delivery network and cached by the user's browser). As this is a pure-css fix, you will notice that the default font appears while the new font is downloading, so you may see a brief change as the new font takes over. If you detest this, you can use the Web Font Loader to smooth this process.

If for any reason there is a problem downloading the font, your substitutes will come off the bench to display your site, so you'll never be without your content.

Of course, you don't want to get too carried away with this, this should be a tool used to create a nice design - not an excuse to go crazy with nasty looking typography. Go check out the Google Font Directory now and have some fun.