@font-face: bold in FF is bolder than in Chrome

Question

I used this code:

@font-face {
    font-family: 'DroidSansRegular';
    src: url('droidsans-webfont.eot');
    src: url('droidsans-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-webfont.woff') format('woff'),
         url('droidsans-webfont.ttf') format('truetype'),
         url('droidsans-webfont.svg#DroidSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSansBold';
    src: url('droidsans-bold-webfont.eot');
    src: url('droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-bold-webfont.woff') format('woff'),
         url('droidsans-bold-webfont.ttf') format('truetype'),
         url('droidsans-bold-webfont.svg#DroidSansBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

and when I using font-weight: bold; then bold text in Chrome is ok, but in Firefox is too much bolder.

How to solve this?

PS: I have to use the fonts from local files.

Answer 1

You have specified two faces in two different families. You have defined a regular face in a family called “DroidSansRegular” and you have defined a bold face in a family called “DroidSansBold”. The design of CSS expects you to define those as two weights of one family. If you make both say font-family: "DroidSans";, then you can use a font family called “DroidSans” and when you ask for bold, you get the bold face from that family.

(Oops. The chosen answer already gave the correct solution but didn’t quite explain what was wrong.)

Answer 2

@-moz-document url-prefix() {
  body h3{
    font-weight: normal;
    font-style: normal;
  }
}

this worked for me!

Answer 3

Typically JavaScript based fonts render better, although everything is going to look different in different browsers because of the rendering engines. You'll even notice a difference between Windows & Mac with the same browser.

Typekit tends to be my favorite choice. Google fonts do pretty well also. I think DroidSans is an option at Google or Typekit.

Answer 4

I used Alex's solution:

@font-face {
    font-family: 'SomeFont';
    src: url('fonts/somefont-webfont.eot');
    src: url('fonts/somefont-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/somefont-webfont.woff') format('woff'),
         url('fonts/somefont-webfont.ttf') format('truetype'),
         url('fonts/somefont-webfont.svg#SomeFontRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SomeFont';
    src: url('fonts/somefontbold-webfont.eot');
    src: url('fonts/somefontbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/somefontbold-webfont.woff') format('woff'),
         url('fonts/somefontbold-webfont.ttf') format('truetype'),
         url('fonts/somefontbold-webfont.svg#SomeFontBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

Which is still not worked in Firefox v24... Today, on 2013. october 28. the bold @font-face problem is still exist.

After a little search, I found this solution here: https://support.mozilla.org/hu/questions/801491

What did work, at least until Mozilla corrects this issue in an update (2011.03.27...), was turning off Hardware Acceleration. Go to Tools->Options | Advanced | General tab | Uncheck "Use hardware acceleration when available". I'm sure this hits performance in some way but so far it is working out fine.

Which is sad that you really can't do anything about the bold fonts in Firefox... You really not have option to turn this off on user's machines. Hardware Acceleration is really important. I guess you just need to live with it. They didn't fixed this in the last 3-4 years. Probaby they won't fix this in the future.

However, I noticed that maybe this issue not affecting the externel javascript fonts (for example: Typekit, EdgeFonts).

Hope that Chrome will find its way on more and more user's PC...

UPDATE:

It's possible only to turn off parts of the hardware acceleration. Tutorial here: http://www.mydigitallife.info/fix-firefox-4-fade-blur-bold-bad-and-ugly-font-rendering/

Also mentioned an another solution: turn off anisotropic filtering for Firefox in your graphic card's settings page (but this is not works for me).

Answer 5

FireFox posted a resolution to this today on their bug forum. It was just finalized today so won't be in use for a while, but we should all put

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

in our body tag to reset this for all browsers. FINALLY!! man, that made my day! This should come out in the next FF release.

thread here https://bugzilla.mozilla.org/show_bug.cgi?id=857142

Answer 6

The Problem here is that FF takes the font and applies the bold font-weight to it (So basically it doubles the effect). Chrome doesn't seem to change the font-weight and just uses the right font. I think this happens because you declare two different font-families. The right CSS for this case would be:

@font-face {
    font-family: 'DroidSans';
    src: url('droidsans-webfont.eot');
    src: url('droidsans-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-webfont.woff') format('woff'),
         url('droidsans-webfont.ttf') format('truetype'),
         url('droidsans-webfont.svg#DroidSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSans';
    src: url('droidsans-bold-webfont.eot');
    src: url('droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-bold-webfont.woff') format('woff'),
         url('droidsans-bold-webfont.ttf') format('truetype'),
         url('droidsans-bold-webfont.svg#DroidSansBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

Notice that I changed the font-family to "DroidSans" not "DroidSansRegular" and "DroidSansBold".