Select Page

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:

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:

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:

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.

roboto1

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:

You get:

roboto2

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:

fout1

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

fout2

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.

fout3

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

Here is the complete code I used for the test page:

Links

Here are some useful links to explore further