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

Question

I've been reading the posts about this, and still can't find the answer. Has anyone figured out how to preload the fonts to stop the flicker/delay?

Cheers. Erik

Answer 1

@Erik,

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