Contact Us​​ | Status Blog
Help Center
Main Web Design and Development › Controlling the Flash of Unsty...

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 before Typekit is loaded */
}
 
.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 help article has more examples of setting CSS styles with Font Events.

Dynamic kits & font events

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 {
    visibility: hidden;
  }

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

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>
 

Still need help? Email Us.

​​​​
support@typekit.com
http://assets3.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete