How to remove the default font in the browser while loading @font-face in CSS? "FOUT"

Question

I am loading two external fonts to my web page using @font-face. They are loading perfect in Chrome but when I try in IE the browser displays some default font while the page is loading, then the fonts are changing to the correct ones according to my css @font-face.

How can I remove the default font from showing up in IE and other browsers while the page is loading? I want to remove the so called FOUT (flash of unstyled text). I there any way to do it through the style sheet?

Thanks for any help!

Answer 1

For the default browser font that you don't want, set the font-size CSS property to 0px and ensure you have declared the font-size in your @font-face class name CSS rules.

If you also want to tackle this using a dedicated script to address this issue (Firefox 3.5/3.6 or Internet Explorer 7-9), check out the FOUT-B-Gone JavaScript solution.