csscross-browserfont-face

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


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.


Solution

  • 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".