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 }

Avinash D'Souza September 15, 2011 at 9:55 am

Does this work with hosted fonts? That is, I’m not using Google fonts…I’m hosting my own.

Reply

Thesis-Blogs.com September 15, 2011 at 10:01 am

Yes, should work. Try it out.

Reply

Avinash D'Souza September 15, 2011 at 10:18 am

Maybe I wasn’t asking the right way. I’ll ask a more specific question: do I need to use this if I’m not using Google fonts? I have the fonts stored locally on my server. Hence, does the Google js file make a difference?

Reply

Thesis-Blogs.com September 15, 2011 at 10:57 am

I see. That’s a good question. I had implemented this and also wasn’t using Google fonts. I was just using @font-face with the font files stored on my server and it worked. But I did discover one issue some time after I wrote the post. Because of that link to the css file it seemed to duplicate the file. I wish I had a definitive answer. Maybe check out my source for this post: http://paulirish.com/2009/fighting-the-font-face-fout/

Reply

Avinash D'Souza September 15, 2011 at 11:07 am

Yeah, I checked that link out but he’s loading a specific font from the Google API. That’s why he’s referencing the .js file. Which makes sense.

Was a fun read though! And I found this… http://www.phpied.com/gzip-your-font-face-files/

Maybe it’ll help you in one of your projects? :-)

Reply

Thesis-Blogs.com September 15, 2011 at 11:14 am

Cool, thanks for the link.

Reply

Karl Kelman February 19, 2012 at 10:33 pm

I’ve found that using jQuery to delay specific content load slightly and/or fade-in text is more reliable and effective than any other method to deal with FOUT.

<script type="text/javascript">$(document).ready(function(){ 	 $('.fader').delay(400).fadeIn(1500); }); </script><noscript> <style type="text/css">.fader{	background-color:#ebebeb;	display:block;}</style></noscript>

Problem Solved!

And, I like the fade in effect!

Reply

Winner June 5, 2013 at 6:33 pm

Thanks soooo much!!! Worked like a charm!

Reply

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: