Firefox font-weight versus font-family property; how to avoid double-bolding

Question

If given the following code from the CSS:

font-family:SpecialBold;
font-weight:bold;

Firefox double bolds (it bolds already bold type). This does not seem to be an issue in Safari, Opera or Chrome. I can't just remove font-weight:bold; because if something happens to the hosted typeface, the default typefaces won't bold.

The issue I'm facing is trying to use at @font-face with non- web-safe typography. The typeface I'm using has a specific bold font. In Chrome etc., the following won't work:

font-family:Special;
font-weight:bold;

beceause the Special typeface can only be bold if the SpecialBold typeace is being used.

How do I make it so that Firefox doesn't double-bold already bold fonts? Or, vice-versa, can I make it so that Chrome etc. uses a bold typeface when font-weight:bold is used?

score 2 · Answer 1 · answered Mar 02 '12 at 06:51

2

You can use this rule to tell the browser that SpecialBold is already bold so that synthetic bolding does not need to be applied:

@font-face {
  font-family: SpecialBold;
  font-weight: bold;
  src: local(SpecialBold);
}

Might need to be modified depending on exactly what your font faces are called, of course.

answered Mar 02 '12 at 06:51

Boris Zbarsky

34,758
5
52
55

Going to give this a try tonight/tomorrow. Thank you for the help. Would vote you up but still have a new account. – AccountStackOverflow Mar 02 '12 at 16:10

score 1 · Answer 2 · answered Mar 05 '12 at 15:15

@font-face {
    font-family: Special;
    font-style:normal;
    font-weight: normal;
    src: local(Special);
}   
@font-face {
    font-family: Special;
    font-weight: bold;
   font-style:normal;
    src: local(SpecialBold);
}

So you can use the same font-family name and change the weight with font-weight instead of using two different font names. Be sure to add the URL of the font on your site in case your users don't have it!

Firefox font-weight versus font-family property; how to avoid double-bolding

2 Answers2