Question

I’m using webfonts on a site. For certain headings (h1, h2, etc.) I’m using bold variants (and setting font-weight to normal) because they look much better than using the regular variant and leaving the h-tags with the default bold weight. It’s necessary to specify font-weight: normal because otherwise “the bold is bolded”, which looks really terrible.

The problem I’m having is, how do I specify standard web fonts as fallback fonts and have the bold setting “restored”?

So for example I might do something like:

@font-face {
    font-family: "My bold webfont";
    src: url("url/of/webfont/bold/variant");
}

h1 {
    font-family: "My bold webfont", Arial, sans-serif;
    font-weight: normal; 
}

As long as the webfont is present we have no problem, but if the webfont fails we end up with non-bold Arial.

Is there a way to specify “Arial Bold” in the font-family of the h1 (I know that doesn’t work, but it’s the desired goal)? Or perhaps in the @font-face definition I can say “this applies only to the bold version of whatever it’s assigned to” – so I can omit the font-weight: normal from the h1 style?

Answer 1

Try specifying font-weight: bold in both places:

@font-face {
    font-family: "My bold webfont";
    src: url("url/of/webfont/bold/variant");
    font-weight: bold;
}

h1 {
    font-family: "My bold webfont", Arial, sans-serif;
    font-weight: bold;
}

Here’s a demo. p#one shows this technique in use; if you look at it in a browser that doesn’t support WOFF webfonts, you’ll see the default font in bold.