Controlling custom fonts with the Google WebFonts API

One thing Google released at the last I/O conference was hosting for custom fonts to use in web sites for browsers that support that feature. So instead of streaming the fonts from your own server you can just point to Google’s farm and be done with it.

Fonts hosted by Google

Google hosts a few fonts for you and all you need to do is embed them.

They also released a font preview tool that allows you to tailor the font you want to your needs:

Hand-written blockquotes

One of the fonts is a scribbly little handwriting font called Reenie Beanie (I’ve used it for the sticky notes in my collection of hacks). Using this font you can create for example some sweet looking blockquotes:

All you need to do is to include the font as a CSS link:

And then you style your blockquote. As the font is rather small you need to bump up its size a bit:

blockquote{
font-family: 'Reenie Beanie', sans-serif;
font-size:160%;
background:#eee;
color:#666;
margin:1em 0;
padding:.5em;
}

And this is where it gets problematic. If for any reason the font cannot be loaded or the browser doesn’t support custom fonts, the experience is less pretty:

Which is a big problem of any pure CSS solutions – you hope things work but you can’t test for it (media queries being the exception here). However, there is another way to use the Google fonts.

Test, don’t hope

Instead of using the direct CSS links you can use the JavaScript Webfont loader which creates the style links with JavaScript and gives you a handle on what was loaded and not (Bonus: the loader is on GitHub).

Instead of the CSS link simply add the following script:

The loader now adds classes to the HTML element of the document to tell you when the font is loaded and when it is available. You can load Google fonts, those hosted by TypeKit and really any other on the web. For all the fonts you specify in the loaded these classes are .wf-inactive and .wf-active respectively. You can also test for a certain font with its name and weight. So to check for Reenie Beanie, the class is .wf-reeniebeanie-n4-active when it is available.

You can use this to define the whole style as relying on the font:

.wf-reeniebeanie-n4-active blockquote{
font-family: 'Reenie Beanie', sans-serif;
font-size:160%;
background:#eee;
color:#666;
margin:1em 0;
padding:.5em;
}

Even better, the webfont loader also provides you with events to subscribe to:

WebFontConfig = {
google: {
families: [ 'Tangerine', 'Cantarell' ]
},
typekit: {
id: 'myKitId'
},
loading: function() {
// do something
},
fontloading: function(fontFamily, fontDescription) {
// do something
},
fontactive: function(fontFamily, fontDescription) {
// do something
},
fontinactive: function(fontFamily, fontDescription) {
// do something
},
active: function() {
// do something
},
inactive: function() {
// do something
}
};

You can use that to display loading messages during font retrieval and all kind of other tricks.