@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

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 2

Typically JavaScript based fonts render better, although everything is going to look different in different browsers because of the rendering engines. You'll even notice a difference between Windows & Mac with the same browser.

Typekit tends to be my favorite choice. Google fonts do pretty well also. I think DroidSans is an option at Google or Typekit.

Answer 3

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