Firefox Icon Font Overly Bold Anti-Aliasing

Question

I'm aware that different browsers render text in different ways – and to a point, I'm cool with that. However upon experimenting with using icon fonts for one project, Firefox, in particular is irritating me.

Essentially I have a row of social media icons, which are displayed via @font-face and some pseudo classes. Except Firefox has a little issue with rendering them nicely...

Here's what they look like Chrome vs Firefox.

Chrome 23.0.1271.101 (Mac)

http://cl.ly/image/0M3t2S3N2A38/

(Perfect)

Firefox 17.0.1 (Mac)

http://cl.ly/image/053d2J0J312K

(Not-so-perfect)

You can probably see the issue I have...

I've also checked several other browsers to see if it's not just firefox. It is just firefox. Even IE does a nicer job.

The code:

CSS

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot');
    src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
    url('fonts/icomoon.svg#icomoon') format('svg'),
    url('fonts/icomoon.woff') format('woff'),
    url('fonts/icomoon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


[class^="icon-"]:before, 
[class*=" icon-"]:before {
    font-family: 'icomoon';
    font-style: normal;
    speak: none;
    font-weight: normal;
    line-height: 1;
    text-align: center;
}


.icon-flkr:before {
    content: "\2b";
}
.icon-fbk:before {
    content: "\2c";
}
.icon-twitter:before {
    content: "\3e";
}
.icon-lfm:before {
    content: "\24";
}
.icon-lkdin:before {
    content: "\25";
}
.icon-inst:before {
    content: "\26";
}

HTML

<ul id="footer_social_list" class="group">
    <li><a href="#" class="icon-twitter" title="Follow me on Twitter"></a></li>
    <li><a href="#" class="icon-fbk"></a></li>
    <li><a href="#" class="icon-lkdin"></a></li>
    <li><a href="#" class="icon-flkr"></a></li>
    <li><a href="#" class="icon-inst"></a></li>
    <li><a href="#" class="icon-lfm"></a></li>
</ul>

I've tried a lot of things to try and fix this. From changing the opacity with CSS; to trying text shadow; changing the weights of both the @font-face, classes and inherited styles; using "data-icon"; even making sure each icon is aligned to the pixel grid.

Nothing has yet yielded any improvement in Firefox, and I'd say with the slight exception of the Instagram icon in IE9, everything looks good in every browser.

So why does Firefox do this? And is there anything I can do to make it behave?

PS: I haven't added -webkit-font-smoothing: antialiased; not that it affects Firefox anyway.

Answer 1

-moz-osx-font-smoothing: grayscale;

See the discussion leading to this new vendor prefixed solution for Firefox.