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.