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