Flash Of Unstyled Content

In some browsers, most notably Firefox, you may see a (barely) noticeable ‘blink’ before the real font loads in (a.k.a. Flash Of Unstyled Content). This is a result of Firefox’s handling of the @font-face rule.

Back in September 2009, we proposed a workaround JavaScript solution using jQuery that hides content until browsers are finished loading fonts. Since then, we have found more effective solutions, and updated the page accordingly.

Paul Irish offered an elegant solution that hides the page contents for a maximum of three seconds and affects Firefox 3.5+ only.

Read more about Paul Irish’s Defeat the Firefox FOUC entirely.

More recently Google and Typekit have introduced WebFont Loader, a JavaScript library that gives you more control over font loading. While we have not tested it thoroughly, WebFont Loader seems to be a very good solution to FOUC.