Preload @Font-Face Fonts to stop Firefox Flicker/Delay

Question

Has anyone figured out how to preload the fonts to stop the flicker/delay?

Answer 1

There has been a lot of discussion regarding this issue which Paul Irish calls FOUT (flash of unstyled text). There are numerous ways to limit this by

1 Putting CSS at the very top of the page before any script tags

2 Minimizing the size of the font file

3 Browser Caching with far future expires headers

4 Gziping your CSS and font file (WOFF can't be gzipped)

Paul Irish has a great article about this: Fighting the @font-face FOUT

Steve Souders also has a great article on his High Performance Websites blog: @font-face and performance

Answer 2

Fighting the FOUT in Firefox : Firefox starts re - rendering the text AFTER window.load event. So what I did is hide the content like Paul Irish does, but AFTER window.load I still wait 200 millisec (to give FF time for the real rendering), and then show the page.

My site has a lot of images, so to speed this up, I first send the page allmost without content, and then get the content with an ajax call. That's a lot of work to satisfie FF, but the results are good.

This is my paul irish variant, note I use negative text-indent in stead of visibility to serve the visitor at least the layout faster:

    <script>
    (function(){
  var d = document, e = d.documentElement, s = d.createElement('style');
  if (e.style.MozTransform === ''){ // gecko 1.9.1 inference
   // s.textContent = 'body{visibility:hidden}';
    s.textContent = 'body{text-indent:-9999px}';
    e.firstChild.appendChild(s);
    function f()
    { 
    var ffrendertime = setTimeout ( function(){s.parentNode && s.parentNode.removeChild(s)} , 200 ); 
    }
    addEventListener('load',f,false);
    setTimeout(f,2000); 
  }
})();
    </script>