Using Google WebFont Loader

About the WebFont Loader

The WebFont Loader is a JavaScript library that gives you extra control over font loading. It was co-developed by Google and Typekit and released as open source. This tutorial will get you started using the WebFont Loader with Fontdeck. We’ll try to keep it simple, but you will need a bit of JavaScript and CSS knowledge to keep up.

The WebFont Loader tells you when the following events happen as a webpage downloads fonts from Fontdeck:

  • When fonts start to download (‘loading’)
  • When fonts finish loading (‘active’)
  • If fonts fail to load (‘inactive’)

The WebFont Loader notifies you in two ways: by applying special CSS classes when each event happens; and by firing JavaScript events. We’ll be covering some of the CSS classes in this tutorial. JavaScript events are detailed in Google’s documentation.

Why Use the WebFont Loader?

Browsers handle the loading of fonts in different ways. For example Safari and Internet Explorer leave a blank space in place of the styled text until the font has loaded from Fontdeck, whereas Opera and Firefox render text with the default font until the Fontdeck font has loaded, resulting in a so-called Flash of Unfonted Text aka FOUT. Some people prefer Safari’s approach as it eliminates FOUT, others think the Firefox way is more appropriate as content can be read while fonts download. Whatever your thinking, the WebFont Loader can make all browsers work the same way.

Implementing the WebFont Loader with Fontdeck

To get the WebFont Loader working on your page, cut and paste the following code into the <head> of your document:

<script type="text/javascript">
WebFontConfig = {
  fontdeck: {
    id: 'xxxxx'
  }
};

(function() {
  var wf = document.createElement('script');
  wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();
</script>

Referring to your Fontdeck website settings page, include in the WebFontConfig object the Project ID for your website which is the number revealed beside the name of your website. Refresh the page and you should be done.

Using WebFont Loader Events

By way of example, let’s remove the FOUT by making Firefox and Internet Explorer work in a similar way to Safari and Chrome. To do this we need to hide the text while the fonts are loading.

While fonts are loading, the WebFont Loader adds a class of wf-loading to the <html> element. Once the fonts have loaded the wf-loading class is removed and replaced with a class of wf-active (or wf-inactive in the unlikely event the fonts failed to load). This means you can style elements on the page specifically while the fonts are loading.

So let’s say the text you need to hide is contained in paragraphs and an H1 heading. By writing the following style rule into your CSS, you can hide the text while the fonts are loading:

.wf-loading h1, .wf-loading p {
  visibility:hidden;
}

Because the .wf-loading class is removed once the the fonts have loaded, the visibility:hidden rule will stop being applied, and the text revealed. You can see this in action on this example page.

For full details and more examples, see the Google WebFont Loader pages.