Flash Of Unstyled Text is a phenomenon that occurs in some browsers when using the @font-face rule in css. The @font-face rule as I'm sure most professional Front End Designers already know, is one of the most hotly debated design tools that make using beautiful and more importantly accessible and selectable Typography, across browsers, even IE6, a reality! That is why this topic is so important to me.
Surprisingly, the two browsers you would expect to have got their act together on this issue are the ones where the FOUT issue is most evident - I shall name no names. You know who you are.
Firefox and Chrome, shame on you, you should know better
It occurs when you load the page. While the font is being loaded, a default system font is put in its place. Eventually, when the font has fully loaded, the @font-face rule kicks in, which is great, however, the sudden change in font makes for a juddery, ugly user experience causing a user to do a 'double take' to adjust their bearings on the content. If you aren't using either of these browsers, have a look at the video below to see the differences in action using a hard refresh (Ctrl/F5) in Firefox 3.6.
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.
If you don't recognise that the issue exists, I'm sure if you've used @font-face enough on your site, your client will point it out for you. If you are one of these people, you are probably one of those lazy so-and-so's who is damaging the Web by not being passionate enough about finding the best solution from every angle.
For the professionals out there, you should have an idea why already. Your journey so far has somehow led you to click on a link to this article so you must be intrugued by the concept of FOUT in some way. When a user sees this happen, their reaction is never a good one. They expect some kind of lag as the page loads, it happens on every page on the web to some extent, however, content loading then changing is very distracting and if it can be tackled, it should be. Our job as a Front End Designers is to make the experience as good as it can possibly be whilst balancing Accessibility, Web Standards, design and many other concerns. Thats why we're the most important and skilled guys and girls working in the Industry. Any professional should be thinking the same way, its for the good of the future of the Web (Thank you and goodnight).
I'm glad you asked. While Mozilla and google are working on fixing this bug in their browsers, there are a couple of ways to tackle it.
Firstly we load the Webfont script straight from google and add a couple of necessary parameters so the page can recognise what fonts we want to preload. We need to seperate out the location of the @font-face rule to make sure the site is optimised. I haven't tested it but I can't see why you wouldn't be able to leave your @font-face rules in your original css and create a new one for the Webfont commands.
Just to tie up the loose ends, this is what is contained in the stylesheet.css file, the @font-face magic:
Of course there is mon frere. Below is a link to the same page as in the demo video above. This has links to the two pages with and without FOUT.