Extreme Flash of Unstyled Text

Posted in Web Fonts, Web Performance and tagged , , , , on by Rick Viscomi.

Extreme Flash of Unstyled Text

A flash of unstyled text, commonly referred to as FOUT, is the undesirable phenomenon during custom web font loading when text in the default font is abruptly restyled to use the custom font.

While researching the effects of asynchronous web font loading techniques, I found an interesting variation on the problem; Chrome and Firefox momentarily hide the text before the custom font is applied. This is what I’m referring to as an extreme flash of unstyled text, or XFOUT, because everyone loves acronyms. To get a feel for what this experience is like, see the WebPagetest screen recording below.

What makes XFOUT so extreme is the even more jarring experience than a straight cut from default to custom font. Between 1.5 and 1.6 seconds, you can see the text disappear then reappear.

In summary, this behavior is only exhibited by Chrome and Firefox when loading custom web fonts asynchronously.

Some unanswered questions: Is this behavior intentional by Chrome and Firefox? Is there anything we can do to mitigate it? If you have any thoughts on this, leave a comment below.

Edit 3/29: As +Maxim R pointed out, Adobe Blank was announced today in part to help combat the FOUT issue. When used with asynchronous custom font loading, it should mitigate the XFOUT issue as well.

One thought on “Extreme Flash of Unstyled Text

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>