@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\') for         


        

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.