User Guide Cancel

Font events

Last updated on May 16, 2021

Font events are included with JavaScript font loading, which is used for dynamic subsetting. The font events allow you to customize your webpage based on whether the fonts are active, still loading, or unavailable for any reason.

Font events are not yet available for CSS font loading. If you are using the default or @import CSS embed code in your website, you can include another JavaScript library to customize your font loading.

Using Font Events in CSS

In order to help you better control how your page is displayed while fonts are loading or inactive, the JavaScript 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):

loading (.wf-loading): Web fonts are loading
active (.wf-active): Web fonts are active
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

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>
  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>

JavaScript callbacks might be used 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 project 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.

Using font events: managing the flash of unstyled text (FOUT)

Each browser handles loading web fonts in its own way. If a browser initially displays the text with a fallback font and then switches to the linked fonts after they’ve finished loading, you can get a flash of unstyled text or 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 fonts are loading */
}

.wf-active h1 {
/* styles to use after fonts have loaded */
}

You can then adjust your styles to make the FOUT less jarring; e.g., by making sure the flashed font and the loaded web 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 section has more examples of setting CSS styles with Font Events.

Using font events: styling fallback fonts

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 load. 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 non-condensed fallback font */
}

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

Using font events: simulating the flash of invisible text (FOIT) for dynamic projects

By default, dynamic projects will render web font-styled text with the Flash Of Unstyled Text (FOUT). This means that the browser will render fallback fonts while the web fonts are loading and then switch to the web fonts once they are available to use. 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 font events. Font events are three classes that are added to the element:

.wf-loading: Added while loading fonts;
.wf-active: Added when at least one font loaded;
.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 */
}

For example, if the h1 and p elements are using a web font, use this CSS to hide them while the fonts are loading.

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

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

Get help faster and easier

New user?