What is FOUT?

Flash Of Unstyled Text is a phenomenon that occurs in Firefox and Chrome browsers when using the @font-face rule in css.

It occurs when you load the page. While the font is being loaded, a default system font is put in its place causing an ugly shift in the font.

Why do I care?

Truth is, if you're asking this question, you aren't interested in the users experience and building Web sites in the best possible way. As you were.

So how do I fix it?

I'm glad you asked. While Mozilla and google are working on fixing this bug in their browsers, the best way is to use Google's Webfont API. It works by loading up the font via javascript. Whilst it is loading the font it will hide any elements, which you need to specify via css, until the font is loaded, then show it. It means that the font will not appear at all until fully loaded, better than flashing between fonts IMHO.

Is there a Demo?

Of course there is mon frere. Below are two pages, both using a pretty hefty font called 'Tusj'. One uses @font-face straight off the bat, the other has the Webfont Chocolate added to it. You'll need to refresh your cache each time to fully appreciate the effect of both but there's a link to a guide on how to do this for every browser at the top of the page (Firefox Hint: Ctrl/F5).

With FOUT Without FOUT