CSS Font Events

In order to help you better control how your page is displayed while fonts are loading or inactive, the Typekit embed code provides a set of font events that are triggered as fonts are loaded onto the page.

There are three main font events, each of which has a corresponding class name (in parentheses):

  1. loading (.wf-loading): Web fonts are loading
  2. active (.wf-active): Web fonts are active
  3. inactive (.wf-inactive): Web fonts are inactive

The CSS classes associated with these events are appended to the HTML element during loading. They can be used in your stylesheets to control how the page is styled as fonts load. For example:

.wf-loading {
/* styles to use when web fonts are loading */
}

.wf-active {
/* styles to use when web fonts are active */
}

.wf-inactive {
/* styles to use when web fonts are inactive */
}

Common uses of font event classes are to control the flash of unstyled text (FOUT) and to define fallback fonts and styles for browsers that don’t support web fonts or have them turned off. It’s always a good idea to include fallback fonts and styles since some combinations of browser, OS, and user preferences will result in fonts being inactive on your page.

JavaScript Font Events

Note: JavaScript font events are not yet supported for dynamic kits.

These font events are also available as JavaScript callback hooks via the Typekit.load method. You can pass an object containing callback functions when you call Typekit.load, and these callback functions will be invoked as different font events occur during loading. For example:

<script src="https://use.typekit.net/xxxxxxx.js"></script>
<script>
  try {
    Typekit.load({
      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
      }
    })
  } catch(e) {}
</script>

These font event JavaScript callbacks are less commonly used than their CSS cousins. When they are used, it’s often to add things like fade-ins when fonts have loaded or to do complex mathematical resizing for presentational layouts based on the dimensions of rendered text.

In addition to these basic font events, more granular font events for individual font variations are also provided. The class names for these events are a combination of font family name, font variation description, and a font event name. So, for example, adding the normal 400 weight of Gesta to a kit would result in font event classes like wf-gesta-n4-loading and wf-gesta-n4-active. On the JavaScript side, fontloading, fontactive, and fontinactive callbacks are available and can be passed the font family and font description for each individual variation.

These font events are available because Typekit’s standard embed code is based on WebFont Loader, an open-source project produced in collaboration between Typekit and Google. If you want to load fonts from multiple web font providers at once, you can use WebFont Loader’s code directly, instead of the Typekit embed code. More information is available in the WebFont Loader documentation.

Controlling the Flash of Unstyled Text (or FOUT) using font events

Fonts are loaded as assets into a web page—just like images or video. Depending on your browser or your connection speed, they can load quickly or lag behind the rest of the page. Different browsers handle font loading differently; for example, Safari and Chrome will refrain from displaying text set in a web font until the font has loaded, while Internet Explorer won’t show anything on the page until the font loads. Meanwhile, Firefox will display the site with the fallback fonts in the font stack, and then switch to the linked fonts after they’ve finished loading. This results in a flash of unstyled text, or FOUT.

Typekit gives you control over how the page is styled while fonts are loading via Font Events, which in turn can help you control the FOUT. When fonts are loading, a class of .wf-loading is applied to the HTML element. Once the fonts have loaded, that class changes to .wf-active. So, you could add the following to your stylesheets:

.wf-loading h1 {
/* styles to use while Typekit is loading */
}

.wf-active h1 {
/* styles to use after Typekit is loaded */
}

You can then adjust your styles to make the FOUT less jarring; e.g., by making sure the flashed font and the loaded Typekit font look to be the same size. Or, you could hide your text until the font is completely loaded. For example:

<style>
.wf-loading h1 {
font-family: "droid-sans";
visibility: hidden;
}
.wf-active h1 {
visibility: visible;
}
</style>

<body>
<h1>This headline will be hidden until Droid Sans is completely loaded.</h1>
</body>

The Styling fallback fonts using Font Events section has more examples of setting CSS styles with Font Events.

Dynamic kits and font events

Note: Only CSS font events are available for dynamic kits; JavaScript font events are not yet supported.

By default, dynamic kits will render Typekit font-styled text with the Flash Of Unstyled Text (FOUT). This means that the browser will render fallback fonts while Typekit fonts are loading and then switch to the Typekit fonts once they are loaded. This is different from the alternate approach to web font rendering, where a browser will hide text while web fonts are downloading and then show the text, styled with the web font, once the web fonts have loaded. That is called the Flash Of Invisible Text (FOIT).

The FOUT approach makes for more immediately usable pages, particularly on slower network connections, but if you prefer the FOIT approach, you can simulate it across all browsers by using Typekit's font events. Font events are three classes that are added to the

element:

  1. .wf-loading: Added when Typekit is loading fonts;
  2. .wf-active: Added when at least one font loaded;
  3. .wf-inactive: Added when none of the fonts loaded.

You can use these three classes in your CSS to simulate FOIT loading by hiding text when the wf-loading class is active and showing the text when the wf-active or wf-inactive class is active:

.wf-loading {
/* styles to use when web fonts are loading */
}

.wf-active {
/* styles to use when web fonts are active */
}

.wf-inactive {
/* styles to use when web fonts are inactive */
}

However, you only need hide content for elements that are actually using web fonts. For example, let's say the h1 and p elements are using a web font:

.wf-loading h1, .wf-loading p {
visibility: hidden;
}

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

Because we recommend placing the Typekit embed code at the bottom of the page for best performance, there is a possibility that the page will render before the dynamic kit JavaScript executes. To avoid unwanted FOUT in this situation, we recommend manually inserting the wf-loading class as soon as possible. You can do this by placing the following script element in your <head> element.

<script>document.documentElement.className += ' wf-loading';</script>

Styling fallback fonts using font events

Fonts are loaded as assets into a web page—just like images or video. Depending on the combination of operating system, web browser, installed extensions, user preferences, and connection speed, web fonts may sometimes fail to render. (For example, if a user is using an older browser or has a security setting that prevents referrers from being sent.) While Typekit’s web fonts will render for the majority of users (at least 97% of the web), occasionally the fonts will be unavailable. In these cases, the fallback fonts in the CSS stack will be used instead.

For example, you can adjust the size of the fallback fonts when using a condensed web font, so that your layout remains consistent even when the web fonts fail to load. Here’s how:

.headline {
/* These fallback styles are used by default */
font-family: Arial, sans-serif;
font-size: 18px; /* Smaller size for our non-condensed fallback font */
}

.wf-active .headline {
/* These styles are used when Typekit web fonts are active */
font-family: "proxima-nova-extra-condensed",Arial, sans-serif;
font-size: 24px;  /* Larger size for our condensed font */
}

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy