Bold / chunky font icons in Firefox

[chrism...@gmail.com]

Does anybody else's fonts look really chunky, almost bold-like in Firefox? I'm on Firefox 18, have applied font-weight: normal (I tried 200 & 400 as well in the off chance they'd help). It's not just a little bit - some icons really look bad in Firefox. They look fine in Chrome & Safari.

[lee.rea...@gmail.com]

I'm seeing this as well on Firefox 19.

It's only Firefox on OS X for me. Every other browser, mac or windows, renders more or less the same but FF on OS X really lays it on thick. Like you, I've had no luck with assigning font weights

[Keyamoon]

This is an issue only in the OS X version of Firefox. See this for more info: https://bugzilla.mozilla.org/show_bug.cgi?id=857142

[chrism...@gmail.com]

Firefox 25 will finally have a fix for this; they're adding the equivalent of
-webkit-font-smoothing: antialiased;

It will be
-moz-osx-font-smoothing: grayscale;

https://bugzilla.mozilla.org/show_bug.cgi?id=857142#c83

It's already in the nightly build.

In the mean time, this is what I figured out:
Making a slightly "lighter" version of the icons is the best way to compensate for this. They're passable in Firefox, and ever-so-slightly lighter in all other browsers. In Illustrator, I create a 16px icon. I resize it to 1024px, and apply an offset path of -6px (these are the numbers that worked best for me). I then export that as a svg, and import it into IcoMoon to build the icon-font. I don't use -webkit-font-smoothing:antialiased (or the pending -moz-osx-font-smoothing: grayscale) unless it's a light icon over a dark background. This is the best way I've found to get icon-fonts to display (mostly) uniformly across browsers & platforms.

[test...@gmail.com]

You're a legend!

-moz-osx-font-smoothing: grayscale; did the trick!

Thank you very much!