Typotheque

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 script using jQuery that hides content until browsers are finished loading fonts. Since then, we found more effective solutions, and updated page accordingly.

Paul Irish offered an elegant solution that makes the page not be visible for a maximum of three seconds, and affects Firefox 3.5+ only.

This should run in the <head> somewhere:

(function(){
  // if firefox 3.5+, hide content till load (or 3 seconds) to prevent FOUC
  var d = document, e = d.documentElement, s = d.createElement('style');
  if (e.style.MozTransform === ''){ // gecko 1.9.1 inference
    s.textContent = 'body{visibility:hidden}';
    e.firstChild.appendChild(s);
    function f(){ s.parentNode && s.parentNode.removeChild(s); }
    addEventListener('load',f,false);
    setTimeout(f,3000); 
  }
})();

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

Harold Kyle of Boxcar Press proposed an alternative solution: http://boxcarpress.com/us/blog/2009/11/05/css-font-face-flickering-in-firefox-somewhat-solved/

Big thanks to Paul and Harold.