Firefox Icon Font Overly Bold Anti-Aliasing - html

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

Answer 2

font-weight:normal !important;
This may seem like the obvious answer but no one mentioned it. Very possible you have a !important on your anchor tags somewhere along the line, keeping them from being normally weighted again.

Answer 3

This is another obvious answer that no one mentioned:
What you're talking about happens in all browsers: when you use light text on a dark background, the text seems more "weighty". The same is true for icon fonts... the small details will bloat out. (There are CSS font-smoothing and text-rendering properties that help correct this, but they don't necessarily work the same in all browsers. See here.)
One way you can get around it, if you want a dark-coloured icon on a lighter circle shape (without using SVG), is to use an icon without the circle, then create your own circle background with CSS.
You won't get a true knockout (the icons won't actually be negative space in the circle, so any background patterns behind your buttons won't show through the icons), but you will avoid the light-text-on-dark-background bleedout.
Of course, you will also lose your border-radius in older versions IE... so weigh (ahem) what matters more.