CSS font-family fonts stack precedence

Question

Short version

Why do the two sections here render differently, though they both have the same available font as the first item in the font-family: css property?

---

Extra long version:

As far as as I know , in css, 'font-family' property contains a list of fonts, prioritized from left to right. If the first font is found, other fonts in the list do not matter:

The property value is a prioritized list of font family names and/or generic family names. w3.org

and

The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font. w3schools.com

So, I have the following piece of html, repeated twice, once inside a #font-simple-stack, and another inside a #font-full-stack div:

<h1 class="serif">
    <abbr title="EtaBits">ηBits</abbr> Syria</span>
    <small> Web Development &amp; Solutions</small>
</h1>

<p class="sans-serif"><strong>EtaBits</strong> is your ultimate online business partner, it helps your business whether it is internet-based or internet-promoted.</p>
<p class="sans-serif"><strong>EtaBits</strong> is a Syria based Web Consultancy, Development &amp; Solutions firm. We aim at providing you with exactly what you need to reach your users and clients.</p>

...and the following font css definitions:

#font-simple-stack .serif {
    font-family: 'Roboto Slab', serif;
}
#font-simple-stack .sans-serif {
    font-family: 'Open Sans', sans-serif;
}

#font-full-stack .serif {
    font-family: 'Roboto Slab', "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
}
#font-full-stack .sans-serif {
    font-family: 'Open Sans', "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
}

First fonts in the two categories, Roboto Slab & Open Sans , are both loaded from google fonts api:

<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab:600|Open+Sans:400,700" />

All said, I expect, that in both times, whether inside #font-full-stack or #font-simple-stack, to have the same result, but in reality, the two stacks renders differently!

I tested on both Firefox and Chromium, under my Ubuntu 12.04 x64 machine.

Answer 1

The google font stylesheet you're calling in doesn't actually have the Roboto font in it. See below: http://fonts.googleapis.com/css?family=Roboto+Slab:600|Open+Sans:400,700

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

If you try separating the two calls out it may work.

<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

Answer 2

The font Roboto Slab is not available, as you can see eg by viewing the CSS being applied in suitable developer tools of a browser. The reason is that you are asking for that font with weight 600, and no such typeface is available. By Google info on Roboto Slab , the available weights are 100, 300, 400, 700.

Answer 3

The font 'Roboto' isn't being called, so the first one fails on Roboto, and displays the default serif instead.

The second has a load of fall back fonts and so it displays one of these instead, so effectively, it's displaying two seperate fonts.

Answer 4

There are two possibilities:

1. You are calling one of the div's incorrectly (wrong id) and/or
2. One of both of the Google Font's are not loading properly

If it works in one div and not in the other there could be a problem with the way you are calling the div. In other words you may not be calling the div by the correct id. It works with one id but not with the other yet there is no difference in the first choices of the font stack from the coding you have shown us.

-or-

You are getting system fonts for serif and sans-serif in the first div and perhaps some other choice in the font stack for the second div. This is the more likely scenario.*

Without seeing the html code where you call the div's by ID and not seeing the resultant font on the screen it is difficult to do anything but speculate.