JavaScript Font Loaders | CSS: Presentation Layer

Standards Based Development

JavaScript Font Loaders

WebFont Loader

WebFont Loader is an open source collaboration between TypeKit and gwf that provides css and JavaScript hooks that indicate a font's status as it is being downloaded. This can be extremely beneficial when normalizing fout across browsers by hiding the text and adjusting css properties so that both fonts occupy the same width.

WebFont Loader tracks three states: loading, active, and inactive (timeout). Corresponding html classes (like wf-loading, wf-active, wf-inactive) can then be utilized to control fout by first hiding headings and then making them visible once the font(s) have downloaded.

JavaScript hooks for the same three events are available via callbacks in the configuration object:


WebFontConfig = {
    google: {
        families: [ 'Tangerine', 'Cantarell' ] // Google example
    },
    typekit: {
        id: 'myKitId' // Typekit example
    },
    loading: function() {
        // JavaScript to execute when fonts start loading
    },
    active: function() {
        // JavaScript to execute when fonts become active
    },
    inactive: function() {
        // JavaScript to execute when fonts become inactive (time out)
    }
};

WebFont Loader also includes callbacks for fontactive, fontloading, and fontinactive that is fired each time a font updates, giving the developer control at a font level.

WebFont Loader is a JavaScript library allowing more control over font loading that is provided by the Google Web Fonts api. The WebFont Loader also permits using multiple web-font providers.

Webfont Loader Quick Example

The following Webfont Loader example helps fight fout by mimicking Firefox's default behavior by first displaying the default serif font, and once the font(s) have loaded it then displays the specified font(s): Webfont Loader fout Demo and code below:


<html>
  <head>
    <script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'Tangerine', 'Cantarell' ] }
      };
      (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>
    <style type="text/css">
      .wf-loading p {
        font-family: serif
      }
      .wf-inactive p {
        font-family: serif
      }
      .wf-active p {
        font-family: 'Tangerine', serif
      }
      .wf-loading h1 {
        font-family: serif;
        font-weight: 400;
        font-size: 16px
      }
      .wf-inactive h1 {
        font-family: serif;
        font-weight: 400;
        font-size: 16px
      }
      .wf-active h1 {
        font-family: 'Cantarell', serif;
        font-weight: 400;
        font-size: 16px
      }
    </style>
  </head>
  <body>
    <h1>This is using Cantarell</h1>
    <p>This is using Tangerine!</p>
  </body>
</html>

The demonstration aboves shows how to define a configuration to load the Tangerine and Cantarell fonts.

Specific WebFont Loader Version Linking

Instead of defining a configuration to load fonts, you can also link to a specific version of the WebFont Loader, which also comes with an added bonus of being served with a longer cache duration. You can do this by altering the previous demo as such:


wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
    '://ajax.googleapis.com/ajax/libs/webfont/1.0.31/webfont.js';

To get the url to the most recent version of the WebFont Loader, see the Make the Web Faster Google Hosted Libraries Developer's Guide, or use the markup below:


// most recent version
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.1.2/webfont.js"></script>