Search code examples
cssfont-facewebfontsgoogle-webfonts

Is it necessary to provide a fallback font for a web font face?


We are using some web fonts on our site, e.g.

<link href="http://fonts.googleapis.com/css?family=Anton" 
    rel="stylesheet" type="text/css">

Due to a bug in IE8 that I have no desire to workaround in other ways, I'd like to recommend to our site authors that they not provide a fallback font when specifying web fonts. For example, instead of:

font-family: 'Anton', "Arial Black", sans-serif;

..do...

font-family: 'Anton';

Is there a real-world scenario where this could cause problems, i.e. why would I need to provide a fallback for a font that I am providing?


Solution

  • I doubt you would have a problem with Google being unreachable. However some browsers do use the fallback font until the downloaded font is available.

    From Google: https://developers.google.com/webfonts/faq

    How is text displayed while the browser is still loading the font file?

    Browser behavior varies depending on the type of browser. Some will only display the text after the font file is loaded, others will use the fallback font from the font stack and then refresh the page when the font is available. The latter behavior is generally referred to as the "flash of unstyled text." For browser details, see the Technical Considerations page.

    For greater control over how browsers behave while the font is still loading, use the WebFont Loader.