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:

  .wf-loading h1 {
    font-family: "droid-sans";
    visibility: hidden;
  .wf-active h1 {
    visibility: visible;

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

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

Still need help? Email Us.

seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found