Aweber - Email Marketing Made Easy
Preventing the annoying ‘Flash of Unstyled Text’

Preventing the annoying ‘Flash of Unstyled Text’

February 20, 2011 · 8 comments

in Web Design

Thesis 1.x Notice: Thanks for reading this post! So, here's the deal. I wanted you to be aware that this post was written prior to the release of Thesis 2. So that means the instructions or other information provided applies specifically to Thesis 1.x and not the latest 2.x version. Thanks!

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

Was this post helpful? Consider subscribing to my blog via RSS or

This Site Runs on the Thesis WordPress Theme

Thesis Theme thumbnail

If you're someone who doesn't understand a lot of PHP, HTML, or CSS, Thesis will give you a ton of functionality without having to alter any code. For the advanced user, Thesis has incredible customization possibilities via extensive hooks and filters. And with so many design options, you can use the template over and over and never have it look like the same site.

If you're more familiar with how websites work, you can use the fantastic Thesis User's Guide and world-class support forums to make more professional customizations than you ever thought possible. The theme is not only highly customizable, but it allows me to build sites with a much more targeted focus on monetization than ever before. You can find out more about Thesis below:

{ 8 comments… read them below or add one }

Leave a Comment

When commenting, you can use basic HTML tags. If you are pasting in any code, please escape it here and then include that code within <pre></pre> tags. Thanks!

CommentLuv badge

Previous post:

Next post: