0

enter image description here

Please see the above image. I'm using the icon font 'FontAwesome' on my website. In the website header, I'm using them for navigation icons. Each of these icons are links, that have the 'fa' and 'fa-2x' classes attached.

I'm not overruling any default font sizes or rendering modes for FontAwesome, so this is a clean state. All screenshots are from Windows 8.1, testing several browsers. Here are my findings:

  • Firefox: perfect rendering, optimal balance between legibility and anti-aliasing
  • Chrome: font rendering too thick and harsh, hurting legibility
  • Safari: reasonable legibility, yet a bit too thin and harsh
  • IE10: Very close to FF, acceptable as-is
  • Opera: Same as Safari

Mu ultimate goal would be to have ideal rendering across browsers, as per the Firefox example. A perhaps more realistic goal is to beat Chrome into submission, as it presents the biggest issue.

Font-Awesome by default has this applied:

-webkit-font-smoothing: antialiased;

I've tried setting this to the other text rendering modes, yet none seem to make a meaningful difference, the same is true for setting the text-stroke property, even at 0 the 'thickness' problem remains. That problem is best seen from the 'members' icon.

You can see the rendering live at www.jungledragon.com

Any clues/tips on how to improve rendering quality and consistency?

Fer
  • 4,116
  • 16
  • 59
  • 102
  • I remember spending a few hours trying to figure this out some time ago. In the end I resolved to make .pngs or SVGs of the FontAwesome icons rather than using them directly. – Chase Ries Mar 16 '14 at 14:19
  • @ChaseRies Thanks. Personally I would prefer to keep them as fonts. Especially PNGs would defeat the purpose of using an icon font. – Fer Mar 17 '14 at 19:57
  • 1
    I'm a "pixel perfect" guy myself, and trying to achieve this same consistency is impossible between browsers. They use different rendering engines and even if they are the same, each vendor tweaks them differently... – Santiago Baigorria Jun 24 '15 at 12:13

1 Answers1

0

That's old issue I can see, but I had similar problem with FontAwesome and discovered that weight of these icons can be different depending on font-weight attribute (that's a font, after all).

So, my problem was that narrow holes in icons becomeing invisible in my app and the solution was setting the font-weight attribute to normal in CSS.

For my liking, icons in Chrome version of your issue are just "overweighted" that way.

Karol Selak
  • 4,248
  • 6
  • 35
  • 65