User Guide Cancel

Font events

  1. Adobe Fonts User Guide
  2. Introduction
    1. System and subscription requirements
    2. Browser and OS support
    3. Add fonts on your computer
    4. Add fonts to your website
    5. Add fonts on CC Mobile
  3. Font licensing
    1. Font licensing
    2. Manage your account
    3. Licensing for Creative Cloud for enterprise customers
    4. Adding font licenses to your account
    5. Removing fonts from the subscription library
    6. Adobe Fonts not available to Adobe IDs registered in China
    7. Why aren't these fonts included in my Creative Cloud subscription?
    8. Morisawa font removal September 2021
  4. Getting and using fonts
    1. Using Adobe Fonts in Creative Cloud apps
    2. Manage your fonts
    3. Resolve missing fonts in desktop applications
    4. Using fonts in InDesign
    5. Fonts and typography
    6. Using web fonts in HTML5 Canvas documents
    7. Using fonts in InCopy
    8. Using web fonts in Muse
    9. Packaging font files
    10. Troubleshooting guide: Adding fonts
    11. Added fonts aren't showing to font menu
    12. "Unable to add one or more fonts" or "A font with the same name is already installed"
    13. What happens when a font I'm using is updated by the foundry?
  5. Web design and development
    1. Add fonts to your website
    2. Troubleshooting guide: Adding fonts to a website
    3. Using web fonts in HTML email or newsletters
    4. Using web fonts with Accelerated Mobile Pages (AMP)
    5. CSS selectors
    6. Customize web font performance with font-display settings
    7. Embed codes
    8. Dynamic subsetting & web font serving
    9. Font events
    10. Why are my web fonts from use.typekit.net?
    11. Site can't connect to use.typekit.net
    12. Using web fonts with CodePen
    13. Browser and OS support
    14. Domains
    15. Using web fonts when developing locally
    16. Content security policy
    17. Printing web fonts
  6. Language support and OpenType features
    1. Language support and subsetting
    2. Using OpenType features
    3. Syntax for OpenType features in CSS
  7. Font technology
    1. OpenType-SVG color fonts
    2. Ten Mincho: important points on updating from Version 1.000

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

  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

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:

  1. .wf-loading: Added while 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 */
}

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

 Adobe

Get help faster and easier

New user?

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online