Google Web Font Loader

What is the Google Web Font Loader?

To understand what the font loader is, you first need to understand using web fonts. With the @font-face CSS rule, you can specify fonts to download for your web page. This CSS rule was first part of the CSS2 recommendation but was not widely implemented by the various browsers. Today it has much wider support. There are still compatibility issues. Different browsers and/or versions support different font file formats, although, modern versions of browsers and tools such as the Google Fonts makes using fonts much easier.

Using the @font-face rule is simple. Below is an example:

<!doctype html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Load limelight</title>
     <style type="text/css">
     @font-face  {
         font-family: Limelight;
         url(http://fonts.gstatic.com/l/font?kit=1-L2_OelF3_Ai78IvkxaPC6CmmUQY1CplXJR6rJHYsA) format('woff2');
     }
     p {
          font-family:limelight,cursive;
     }
     </style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo rem distinctio nihil incidunt<br />
      dolorem quibusdam laudantium pariatur tenetur mollitia eveniet omnis cum magni quod praesentium<br />
      sunt ipsa aperiam fugiat.</p>
<p></body>
</html>

<!doctype html>

<head>

<title>Load limelight</title>

@font-face {

font-family: Limelight;

url(http://fonts.gstatic.com/l/font?kit=1-L2_OelF3_Ai78IvkxaPC6CmmUQY1CplXJR6rJHYsA) format('woff2');

}

p {

font-family:limelight,cursive;

}

</style>

</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo rem distinctio nihil incidunt<br />

dolorem quibusdam laudantium pariatur tenetur mollitia eveniet omnis cum magni quod praesentium<br />

sunt ipsa aperiam fugiat.</p>

</html>

The above example is loading the font “Limelight” from the Google fonts repository. You can use the @font-face rule to load fonts from your own server or from different font libraries on the web.

That is pretty straightforward, however one issue with loading fonts is that downloading the font library takes time. Fonts are considered assets like videos or images. Browsers will request the fonts to be downloaded, and different browsers handle the download differently. Some refrain from displaying the text that is set in the font until the font is downloaded, while some will display the text first in the fall-back font or default font and then change to the downloaded font when the font is loaded. This can cause a “Flash Of Unwanted Text” or FOUT.

The Google Web Font Loader is designed to give you some control over what is happening. It does this with JavaScript that you can add to your web page with the following lines of code:

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.3/webfont.js"></script>

1	<script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.3/webfont.js"></script>

<script>
  WebFont.load({
    google: {
      families: ['Limelight', 'Roboto']
    }
  });
</script>

WebFont.load({

google: {

families: ['Limelight', 'Roboto']

}

});

</script>

The above lines of code gets the script from the Google libraries at https://developers.google.com/speed/libraries/devguide#webfont and then specifies which fonts to load. In this case the fonts are Limelight and Roboto. Note that by using the font loader you don’t have to add the @font-face rule. That is taken care of for you.

The script adds CSS classes to your tag based on whether or not the font has loaded yet. For advanced users it also provides JavaScript Events that you can use. The CSS classes and events are defined in the Web Font Loader documentation at https://github.com/typekit/webfontloader. For this article let’s look at how you might use three of the CSS classes. Those are:

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

Assuming that you have assigned the font to an HTML element such as your heading 1 tags with the following CSS,

h1 { font-family: Limelight; }

then as the font is being loaded, your <html> tag would have the class .wf-loading. Once the Limelight font is downloaded, the class wf-loading is removed, and wf-active is added to the tag.

Adding those classes by themselves doesn’t do anything to remove or minimize the FOUT. But you can now add some CSS rules to affect how the text is shown. For example, one technique is to hide the h1 elements using the CSS property visibility:hidden while the font is loading, and then make it visible once loading is complete:

.wf-loading h1 { visibility: hidden; }
.wf-active h1 { visibilty: visible; }

1 2	.wf-loading h1 { visibility: hidden; } .wf-active h1 { visibilty: visible; }

This hides the unwanted text, showing white space instead, and then suddenly shows the text. Or, for browsers that display a fall-back local font you could apply CSS to make the font look closer to the downloaded font by adjusting font-size, letter-spacing, etc.

For example, here are some screen shots of a paragraph in the Roboto font, and in Arial.

The first paragraph is in Roboto, the second in Arial. Notice how different the line lengths are. If you then change the CSS for the Arial with the properties:

 letter-spacing:0.23px;
 line-height:1.3;

1 2	letter-spacing:0.23px; line-height:1.3;

You get:

Notice that the line lengths are much closer now. Using an animated gif simulates the difference in FOUT between the two. First without the Arial styled:

And, here is with the line-height and letter-spacing properties:

The second is not as jarring to the eye. You could also add an opacity to the Arial that could make the transition even seem smoother.

The point of all of this is, that by using the loader, the developer now has more control over what the user sees and experiences. It is important to note that since this is a JavaScript solution you should add a

Managing fonts with the Google Web Font Loader

What is the Google Web Font Loader?