7

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!

user1577346
  • 71
  • 2
  • user1577346, since my answer works for you, please **accept** that answer which will place a green checkmark on it. Thanks. – arttronics Aug 07 '12 at 20:54

2 Answers2

3

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.

arttronics
  • 9,957
  • 2
  • 26
  • 62
  • this would work but I'd want a fallback with a feature detector like modernizr just in case font-face isn't available and you can give the font-size a positive value – Dylan Valade Aug 05 '12 at 13:15
  • You can always revert the font-size during the font fall-back rules of the webpage, but that's a different requirement that the OP might not need. – arttronics Aug 05 '12 at 13:18
  • Are you sure `font-size` is allowed in `@font-face`? It isn't listed in http://www.w3.org/TR/css3-fonts/#font-prop-desc – RobertO Aug 05 '12 at 13:35
  • @atlavis, I've clarified my answer to avoid confusion. Also, you can literately use [**`font-size-adjust`**](http://www.miltonbayer.com/font-face/#adjust) CSS rule property for the `@font-face` CSS rule too. – arttronics Aug 05 '12 at 13:59
0

You could use a CSS transition to fade your text in after N milliseconds or whatever you feel is sufficient to load the font assets. css3 transition animation on load?

Community
  • 1
  • 1
Dylan Valade
  • 5,565
  • 6
  • 42
  • 56
  • Not a good answer. The link you provides shows how to `fade-out` the text during mouse `hover` event. – arttronics Aug 05 '12 at 13:28
  • 1
    Posting a link to some other SO Question without providing any relevant code that actually answers this question is a no-go and is typically done as a comment. – arttronics Aug 05 '12 at 20:08