CODEWITHSUNDEEP
firefoxfontsfont-facebold
AccountStackOverflow
AccountStackOverflow

Reputation: 55

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

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?

Upvotes: 2

Views: 1406

Answers (2)

justiceorjustus
justiceorjustus

Reputation: 1965

@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!

Upvotes: 1

Boris Zbarsky
Boris Zbarsky

Reputation: 35074

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.

Upvotes: 2

Related Questions