How do you set web font stacks with multiple styles?

Question

Web fonts tend to come split up into separate files for bold, italic, etc. I'm using a @font-face declarations like this (trimmed down to WOFF only for this example):

@font-face {
    font-family: 'OpenSans';
    src: url("fonts/OpenSans-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansItalic';
    src: url("fonts/OpenSans-Italic.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansBold';
    src: url("fonts/OpenSans-Bold.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

And then I implement the various styles:

body {
    font-family: "OpenSans", Helvetica, sans-serif;
}

strong {
    font-family: "OpenSansBold", Helvetica, sans-serif;
    font-weight: normal; /* Web font is already bold */
}

em {
    font-family: "OpenSansItalic", Helvetica, sans-serif;
    font-style: normal; /* Web font is already italic */
}

I have to override the UA's bold/italic styling (the commented lines above). Otherwise, it will add a faux-bold/italic look to the text which is very ugly.

If I were to leave it like that, and one of the web font files failed to load, then the fallback font would not have the proper style. For example, this:

<strong>This text is bold</strong>

would display as Helvetica regular if OpenSans-Bold.woff failed to load, but I want it to be Helvetica bold.

How do you make sure that your fallback fonts get the correct bold/italic/regular styling?

Answer 1

you want to combine your @font-face rules.....only declare one font-family name, and declare the weights as your variables, like bold, italic, etc. the example below shows how to use Open Sans Regular with Open Sans Bold:

@font-face{font-family:"open_sansregular";
src:url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.eot");
src:url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.eot?#iefix") format("embedded-opentype"),
 url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.woff") format("woff"),
 url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.ttf") format("truetype"),
 url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.svg#open_sansregular") format("svg");
font-weight:normal; font-style:normal}

@font-face{font-family:"open_sansregular";
src: url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.eot");
src: url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.eot?#iefix") format("embedded-opentype"),
 url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.woff") format("woff"),
 url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.ttf") format("truetype"),
 url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.svg#open_sansbold") format("svg");
font-weight:bold; font-style:normal}

if you are familiar wtih @font-face rule, its so easy...the only differences in the two rules above is the url(s) and the font-weight. so for italic, change the url to point to the italic font, and then change the style to font-style:italic.

there's a bunch of benefits you get from this, including less rewrites because you're not going to have to redeclare each font...you only declare it once.

but that essentially reduces your css to this:

body{font-family:"OpenSans", Helvetica, sans-serif}
strong{font-weight:700}
em{font-style:italic}

then simply build a better font stack that provides the amount/level of coverage that you desire.