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

fonts embedded-fonts
Erik picture Erik · Jul 31, 2010 · Viewed 17.7k times · Source

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

Answer

Chris_O picture Chris_O · Sep 4, 2010

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

Related questions

How can I extract embedded fonts from a PDF as valid font files?

I'm aware of the pdftk.exe utility that can indicate which fonts are used by a PDF, and wether they are embedded or not. Now the problem: given I had PDF files with embedded fonts -- how can I extract …

Read More
Is it possible to adjust a font's vertical scaling using CSS?

I am using an embedded font for the top navigational elements on a site Helvetica65 and at 16px it is the perfect WIDTH but I need it to be about 90% of it's current height. In Photoshop, the solution is simple …

Read More
Flash AS3, is text anti-aliasing controlled by code?

Is text anti-aliasing controlled by code, or is it embedded? What I want to do is take a swf file that someone else has made, find all of the text in the swf file and change all of the anti-aliasing …

Read More