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

css font-face webfonts google-webfonts
Steve Campbell picture Steve Campbell · Aug 21, 2012 · Viewed 8.9k times · Source

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?

Answer

user1512616 picture user1512616 · Aug 21, 2012

Google fonts use @font-face tag. Fallback font is suppose to keep your design/layout looking consistent when @font-face is not supported or available.

Reference: http://webdesignerwall.com/tutorials/css3-font-face-design-guide

Related questions

Should I locally store CSS generated by the Google Web Fonts API?

I am using some Google Web Fonts. I hear that Google deal with all the issues between different browsers and serve different media depending on the browser in the request header. My question is, at what point does it do …

Read More
roboto font not working in css

I've CSS and XHTML files. I've downloaded all the ROBOTO fonts and put it in my "webapps/fonts/" folder. In my XHTML i mentioned the CSS Path, '<link href="../css/tab_ux.css" rel="stylesheet" type="text/css" /&…

Read More
Google Webfont conflict with local font

I have a really bad conflict with using google-webfonts. OK here is the code: This is in head: <link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'> And this is in the …

Read More