@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

The issue is that Firefox tries to add the bold affect to text even for custom fonts that are already bold. I've just had the exact same situation, and resolved it by setting font-weight: normal; on the @font-face declaration.

Example:

@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: normal;
    font-style: normal;
}

You'll also need to use font-weight:normal; on any element (e.g. h1, h2, etc) that would otherwise have font-weight:bold; set otherwise Firefox will still add bold to the custom font.

Answer 2

My problem was that the text that was "more bold" was within a h1 tag. I just added the following to my CSS and it fixed the problem! :)

h1,h2,h3,h4,h5,h6{
    font-weight:normal;
}

Answer 3

In a nutshell, there really isn't a way to solve this due to the slight differences in rendering engines and internal settings used by each browser. (as @LainBallard alluded to).

If you really need to have pixel-perfection, your only real hope is to use images, but I would try to tweak your design so that you don't need the pixels to match exactly.