Preventing the annoying ‘Flash of Unstyled Text’

I’ve been using @font-face lately for custom web fonts and with this, I’ve noticed what’s known as the “Flash of Unstyled Text” or FOUT. This occurs in Firefox and Opera where for a split second the browser will display the standard typeface just before the custom font is rendered. You see a quick flash of the regular font and then the custom font kicks in.

Not only is this annoying but it’s unprofessional. It seems that with Firefox and Opera, the regular font is displayed until the custom font is ready, resulting in the flash of unstyled text. From my research, Webkit browsers take a different approach. The text is kept invisible until the font is ready. That way, you never see the standard font.

A solution to FOUT

There are numerous ways around this problem and I’ll provide some links at the end of this post with more information. The solution I chose, which I find works really well and serves my needs is this one which I discovered on Paul Irish’s blog. This is much like the solution for when you’re using Cufon where the font is hidden until the custom font is ready.

<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
  custom: {
    families: ['CustomFontName'],
    urls : ['http://thesis-blogs.com/stylesheet.css']
  }
});
</script>

Just put the name of your font where shown and the full URL to your stylesheet. Then add this to your stylesheet:

/* Custom font applied to H2's */
.wf-loading h2 { 
  visibility: hidden; 
}
.wf-active h2, .wf-inactive h2 {
  visibility: visible; 
  font-family: 'CustomFontName', 'Georgia', serif;
}

Of course, replace ‘CustomFontName’ with the name of the custom font.

This works really well and is a quick, simple solution to the Flash of Unstyled Text issue.

Some additional reading

• Paul Irish solutions
• Webmonkey

Tagged as: @font-face, Custom Fonts, web design