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

user1065425 picture user1065425 · Jan 20, 2012 · Viewed 20.6k times · Source

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

kristina childs picture kristina childs · Jul 30, 2013

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