Improving Your Site with a Font Loader

Developing websites or web applications is really complex work, today more than ever. Designers and developers have to take into account a lot of factors and deal with a myriad of devices, operating systems, screen sizes, and capabilities. Then, for those who take their work seriously, there are a plethora of best practices to adhere to - some even contradicting things we were taught when we started our career. For example, today it is recommended that you inline JavaScript functions or even CSS code for the above-the-fold content (if it exists, of course).

Web designers love typography. Modern web pages tend to include at least one custom font for a better look and feel. However including custom web fonts has two main concerns: performance and the flash of unstyled text (FOUT) issue, as Paul Irish named it.

In this article we'll discuss what FOUT is and how to solve it by using a font loader.

What's the Problem?

If your site will include multiple font files, you have to consider performance. Multiple fonts increase the download time of a website. Besides, while the font is loaded some browsers (Chrome, Internet Explorer, Opera, and Safari) show a blank space in place of the content using the custom font. So, until the font is completely downloaded, that part of the page is useless.

On the contrary, Firefox and older versions of Opera show text in a fallback font and then switch to the custom font. This often results in an unpleasant experience because the two fonts are very different. The latter issue is what was referred by Paul Irish as the FOUT problem, but both of these issues (blank space and the FOUT) are something we want to avoid when building a website.

Want a concrete example of the blank space issue? Here an image I shared in a recent tweet:

Using a Font Loader

To reduce the time to download the custom fonts you can serve them gzipped, so the file size will be smaller. While this is a good and simple improvement, it doesn't fix our original issues.

The most widely adopted approach to get a uniform the browser behavior and avoid the problems we discussed above is to use the Web Font Loader. Web Font Loader is a JavaScript library created by Typekit and Google that gives you added control when using linked fonts via @font-face. It provides a common interface to loading fonts regardless of the source, then adds a standard set of events you may use to control the loading experience. This library can load fonts from Google, Typekit, Fonts.com, and Fontdeck or from your own server.

At this point you may ask, "Aren't we just fixing these issues by including a completely new library that will add even more weight to the site?" Well, the short answer is, "Yes." The longer answer is "Yes, but the library only adds ~7Kb to the page (~17Kb if not gzipped) but it lets you fix a very important problem." Besides, keep in mind that some fonts can weight more than 250Kb and, considering that some websites use more than one custom font, 7Kb shouldn't be much of a concern.

How It Works

When the Web Font Loader is included and loaded on your page, it'll set classes on the html element to reflect the current status. There are three classes that refer to the general state of the loader:

• .wf-loading
• .wf-active
• .wf-inactive

And three classes that refer to the state of each specific font:

• .wf-[familyname]-[variant]-loading
• .wf-[familyname]-[variant]-active
• .wf-[familyname]-[variant]-inactive

where familyname is the name of the font in lower case with no special characters and variant is the variation description which relates to style and weight. The default for normal fonts is n4.

So, with these classes, you can add in CSS code something like:

/* Defines the fallback font */
body
{
   font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

/* Switch to the custom font when it's loaded */
.wf-active body
{
   font-family: 'Pontano Sans';
}

How To Use Web Font loader

The Web Font Loader library can be loaded in two ways: synchronously and asynchronously. In this article I'll discuss the second way that avoids blocking the page while loading the JavaScript.

The first step is to decide the font to load. As an example I'll assume that a web page uses the Google Fonts API to load a font called Pontano Sans. Once you know the font to employ, you have to create a global object named WebFontConfig that defines the font and optionally configures the settings you want. As the last step we'll include the library as shown below:

var WebFontConfig = {
    google: {
        families: ['Pontano Sans']
    },
    timeout: 1500
};

(function(){
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.async = 'true';
    document.head.appendChild(wf);
})();

As you can see, in the snippet I've also set a timeout property with a value of 1500. This specifies that, if the font file requires more than one and a half seconds (i.e. 1500 milliseconds) to download, the request is abandoned.

Once we have the library and its configuration in place, we can use the CSS classes set on the html element to improve how the switch of the font on the website is performed as shown in the previous section. We'll also tweak the fallback font so that it won't distract the users, or at least will reduce the distraction to a minimum.

Below you can find a demo that demonstrates how you can use the Web Font Loader to reduce the switch effect to a minimum by tweaking the font-size, the line-height and the word-spacing:

If you want to learn more about the Web Font Loader, you can visit its GitHub repository.

Conclusion

In this article I've illustrated a common problem developers deal with when using one or more custom fonts in a website. As you have seen using the Web Font Loader we can make the browser's behavior uniform and predictable and reduce the FOUT to a minimum. This approach is nice and works in practice, however my final suggestion is simply not to abuse of custom fonts. When overused, they can dramatically increase your page weight, which is something we should avoid, especially for users with metered connections.

Header image courtesy of Taryn