Apr 12, 2017

FOUT with Web Font Loader

blogpost author photo
Paweł Przymusiała
blogpost cover image
Web Font Loader is a nice library, just include it in your page and tell it which fonts you want to load. It was co-developed by Google and Typekit. 

More info about project - the documentation and source code for the Web Font Loader you can find at the GitHub repository.

Web Font Loader is recommended way by Google PageSpeed Tools for load fonts.
You can define what font type exactly you want, eg.

  WebFontConfig = {
    google: { families: [ 'Lato:400,300,700,100,300italic&subset=latin,latin-ext' ] },
    active: function() {
      sessionStorage.fonts = true;

  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://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);

When you insert this code into your website you can use new font - `Lato` from Google Fonts. It works also for Typekit, Fonts.com, and Fontdeck, as well as self-hosted web fonts.

Everything works fine, looks good. Script was loaded async. We achieve more points in PageSpeed. But... if you look closer? FOUT!

What is FOUT?

In this case FOUT means Flash Of Unstyled Text. At beginning you see content without font style. After while (when font is loaded async) you receive text with correct font style. It looks ugly, isn't it?

How we can prevent this? If you spend some time for research you can find a few solutions. Sadly, mostly they are outdated or doesn't work with rules from PageSpeed.

What to do?

The simplest way which I can recommend is to hide important content until fonts will be loaded. Then, you just need to show text. How? Of course you can write own script or use one from existing. But, look at this!

CSS events are implemented as classes on the html element. The following classes are set on the html element:


Here is example how you can use this information:

  .wf-active body {
    font-family: 'Lato';

  h1, p {
    visibility: hidden;

  .wf-active h1, .wf-active p {
    visibility: visible;

In this way the whole page will be loaded, and selected elements with text will be shown when we will be sure that fonts are available.

If you don't care about this, you can also hide all content, for example:
Add into <html> class: `.wf-loading` and this css:

  .wf-loading {
    background: url('loader.gif') no-repeat center center; /* just to show that something's happening */
    height: 100%;
    overflow: hidden;
    opacity: 0;
  .wf-active *,
  .wf-inactive * {
    -webkit-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -o-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;