Bold / chunky font icons in Firefox

722 views
Skip to first unread message

chrism...@gmail.com

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

unread,
Mar 7, 2013, 5:07:18 PM3/7/13
to ico...@googlegroups.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

unread,
Apr 30, 2013, 6:37:59 AM4/30/13
to
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

unread,
Sep 24, 2013, 9:25:04 PM9/24/13
to ico...@googlegroups.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

unread,
Jan 31, 2014, 4:57:29 AM1/31/14
to ico...@googlegroups.com
You're a legend!

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

Thank you very much!

Reply all
Reply to author
Forward
0 new messages