Font Face Selectors with weight and style properties - browser ignores all but last selector

Question

I am using multiple web fonts of the same family to avoid browsers from rendering in faux-bold and faux-italics. When declaring selectors, I set the same name for all font-family properties and am using font-weight and font-style to differentiate.

Here's an example I'm using for Exo.

@font-face {
    font-family: "exo";
    src: url("../fonts/exo/exo-regular.eot");
    src: url("../fonts/exo/exo-regular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/exo/exo-regular.woff2") format("woff2"), 
    url("../fonts/exo/exo-regular.woff") format("woff"), 
    url("../fonts/exo/exo-regular.ttf") format("truetype"), 
    url("../fonts/exo/exo-regular.svg#exo") format("svg");
    font-weight: "normal";
    font-style: "normal";
}

@font-face {
    font-family: "exo";
    src: url("../fonts/exo/exo-bold.eot");
    src: url("../fonts/exo/exo-bold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/exo/exo-bold.woff2") format("woff2"),
    url("../fonts/exo/exo-bold.woff") format("woff"),
    url("../fonts/exo/exo-bold.ttf") format("truetype"),
    url("../fonts/exo/exo-bold.svg#exo") format("svg");
    font-weight: "bold";
    font-style: "normal";
}

p {
    font-family: "exo", sans-serif;
}

I have confirmed that a paragraph tag is not inheriting font-weight from another selector.

From the above CSS I am expecting a <p/> tag to have a normal font weight. Instead, all instances of <p/> are bold. When checking the browser inspector, the font-weight, it reads as 'normal.'

I am also using Roboto with web fonts for all things normal, bold, italics, and bold-italics. Whatever is the last @font-face selector listed is what gets used be default.

I've seen different ways to implement this approach using different font-family names (e.g. font-family: "exo-bold"), but I shouldn't have to do that. My objective is to:

1. Use multiple web font files that represent the font in different states (e.g. exo-regular.woff, exo-bold.woff).
2. Use the same font-family name for all weight and style variants of the same font.
3. Include font-weight and font-style properties to identify those variants.
4. Set weight and style using other CSS or markup like <strong>.

It seems like I've done this before and it's worked. Can anyone spot an error in my approach?

Answer 1

No quotes should be used in your font-weight and font-style rules. This will work:

@font-face {
    font-family: "exo";
    /* files for normal weight */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "exo";
    /* files for bold weight */
    font-weight: bold;
    font-style: normal;
}

Actually, in CSS you only need quotes when you have spaces or other reserved characters in your font names or file names. So this should work:

<!-- language: lang-css -->
@font-face {
    font-family: exo;
    src: url(../fonts/exo/exo-regular.eot);
    src: url(../fonts/exo/exo-regular.eot?#iefix) format(embedded-opentype),
         url(../fonts/exo/exo-regular.woff2) format(woff2), 
         url(../fonts/exo/exo-regular.woff) format(woff), 
         url(../fonts/exo/exo-regular.ttf) format(truetype), 
         url(../fonts/exo/exo-regular.svg#exo) format(svg);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: exo;
    src: url(../fonts/exo/exo-bold.eot);
    src: url(../fonts/exo/exo-bold.eot?#iefix) format(embedded-opentype),
         url(../fonts/exo/exo-bold.woff2) format(woff2),
         url(../fonts/exo/exo-bold.woff) format(woff),
         url(../fonts/exo/exo-bold.ttf) format(truetype),
         url(../fonts/exo/exo-bold.svg#exo) format(svg);
    font-weight: bold;
    font-style: normal;
}

p {
    font-family: exo, sans-serif;
}

I personally only use quotes in CSS when it doesn't work without.

But you never quote normal CSS terms, as they'll stop working.