CSS font-family fallback rules don’t cascade down

The last website I created I decided to check if something I assumed to be true actually was.  Do CSS font-family fallback rules cascade down, i.e. if you have a body font-family declared then have a special web font for a title, will the body font be used if the web font was unavailable.  The answer is no.  This rings true across all major browsers.

Screenshot of Chrome with developer tools open, font-family on ancestor rule has been overruled, then ignored by the font selection algorithm

Chrome’s developer tools failing to show which font will be used.

The screenshot above shows Chrome (22.0.1229.94 m) viewing the following code, however Opera (12.02), Firefox (16.0.2) and IE (9) all do exactly the same thing (all running on Windows 7):

<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
p {font-family: Consolas, Lucida Console, Monaco; font-size: 30px;}
p#fallbackStackDeclared {font-family: 'Unavailable font', Consolas, Lucida Console, Monaco;}
/* no fallback declared, you would assume it would cascade to the "p"s declaration */
p#failedFallback {font-family: 'Unavailable Font';}
<p>standard p font</p>
<p id="fallbackStackDeclared">unavailable font with fallback</p>
<p id="failedFallback">unavailable font but no fallback stack</p>

To conclude, current browsers will not fallback through the cascade rules for font-family declarations, instead they will ignore all your CSS font-family fallback rules and use some font predetermined by the developer of the browser. Remember to specify a fallback if there’s a chance you’re font won’t be available (i.e. you’re not hosting it)

2 thoughts on “CSS font-family fallback rules don’t cascade down”

  1. estampado de camisetas says:

    It is truly a nice and helpful piece of info. I’m glad that you simply shared this useful information with us. Please keep us informed like this. Thanks for sharing.

  2. will Simply says:

    Wohh just what I was looking for, appreciate it for posting.

Comments are closed.