Rid Your Site Of The Dreaded FOUT

FOUTWeb fonts opened up a new world of typographic possibilities for web designers. No longer did we have to rely on a handful of “web safe” fonts. We could choose from thousands of fonts offered by services like the Google Fonts and Typekit. We could experiment with fonts to our hearts’ content, finding the perfect combinations without having to spend big money on licenses. In short, web fonts are awesome.

However, web font services are not without their limitations, one of the most pernicious of which is the dreaded Flash Of Unstyled Text (FOUT). We’ve all experienced this: we load up a web page, and for just a second, we see an ugly fallback font, which is quickly — or not so quickly — replaced by the designers’ chosen font.

FOUT happens because it takes time to run the JavaScript snippet that retrieves and loads the font files from the font service’s servers. Before they can load, the browser will display a fallback with default styling which is often radically different to the designer’s styles.

Usually, the font service’s JavaScript snippet blocks rendering of the rest of the page as it loads. This is the usual behavior for JavaScript — the browser stops doing anything while it loads the script. Font services like Typekit are combating the latency this can cause with the introduction of asynchronous loading of their JavaScript snippet — it won’t block the loading of the rest of the page. That’s great for performance, but it compounds the FOUT problem as it’s even more likely that unstyled fallback fonts will be displayed.

Fighting FOUT

Fortunately, a nifty tool called “webfontloader” gives us a way to avoid — or at least minimize — the impact of unstyled text. Webfontloader, which is used by most major font services, including Google Fonts and Typekit, inserts classes into a page’s HTML that change according to the loading state of the fonts.

These “wf-” classes allow us to control the appearance of text on the page with CSS before and after the web font has loaded with the “wf-loading” and “wf-active” classes.

Strategies For Avoiding FOUT with Webfontloader

Hiding text altogether is the easiest approach. As a simple example, consider a blog article that uses a web font. When the web font is loading — has not yet loaded — the tag on the page will be given a “wf-loading” class.

To hide the content of paragraphs while that class is present, you’d include the following in your stylesheets:

.wf-loading p {
font-family: "avenir";
visibility: hidden;
}
To show the fonts after they have loaded, you would include:
.wf-active p {
font-family: "avenir";
visibility: visible;
}

With this method, the visitor is shown no paragraph text at all until the fonts have loaded. The same process will work for headings and other text on the page.

Of course, these classes allow for much more subtle interventions than simply hiding the text. You could display a loading indicator until your fonts are available, or you could force the browser to use web safe fonts similar in appearance to your chosen fonts and style them to match in size, reducing the contrast between the fallbacks and the web fonts.

Matthew Davis is a technical writer and Linux geek for Future Hosting.

Dedicated Server Special

Take advantage of our Double RAM offer on the E3-1230v2 4 x 3.30GHz+HT server! Only $134.95 per month. Managed and Unmanaged options available at checkout.

GET STARTED