13

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

Dharman
  • 30,962
  • 25
  • 85
  • 135
Erik
  • 5,701
  • 27
  • 70
  • 119

2 Answers2

18

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

Dharman
  • 30,962
  • 25
  • 85
  • 135
Chris_O
  • 3,429
  • 1
  • 22
  • 28
15

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>
gertov
  • 188
  • 1
  • 4
  • This was really useful, I changed it to 600 instead of 200 as the font wasnt loading quick enough. EDIT: Later changed it back after I stopped using the Google font api - too slow. – Kieran Andrews Mar 09 '11 at 05:43
  • Wouldn't it be better to just hide the text with a wf-inactive class on the html tag and an inline style in header that hides all descendant nodes of .wf-inactive that contain a text element rather than do a wacky workaround that loads text in after DOM load. Thinking this would be better for SEO than loading the physical content via AJAX. – cchamberlain Mar 23 '15 at 17:37