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!

1
  • user1577346, since my answer works for you, please accept that answer which will place a green checkmark on it. Thanks.
    – arttronics
    Aug 7, 2012 at 20:54

2 Answers 2

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.

4
  • 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 Aug 5, 2012 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 5, 2012 at 13:18
  • Are you sure font-size is allowed in @font-face? It isn't listed in w3.org/TR/css3-fonts/#font-prop-desc
    – RobertO
    Aug 5, 2012 at 13:35
  • @atlavis, I've clarified my answer to avoid confusion. Also, you can literately use font-size-adjust CSS rule property for the @font-face CSS rule too.
    – arttronics
    Aug 5, 2012 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?

2
  • Not a good answer. The link you provides shows how to fade-out the text during mouse hover event.
    – arttronics
    Aug 5, 2012 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 5, 2012 at 20:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.