Bold / chunky font icons in Firefox

Skip to first unread message

Feb 4, 2013, 8:17:48 PM2/4/13
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.

Mar 7, 2013, 5:07:18 PM3/7/13
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


Apr 30, 2013, 6:37:59 AM4/30/13
This is an issue only in the OS X version of Firefox. See this for more info:

Sep 24, 2013, 9:25:04 PM9/24/13
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;

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.

Jan 31, 2014, 4:57:29 AM1/31/14
You're a legend!

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

Thank you very much!

Reply all
Reply to author
0 new messages