CSS font smoothing coming to Firefox for Mac

Finally a Mozilla equivalent to -webkit-font-smoothing: antialiased is on the way in Firefox 25: -moz-osx-font-smoothing: grayscale. No more chunky font icons in Firefox for Mac!

Unfortunately we will have to wait a few weeks for this to be useful as Firefox 25 is currently in Aurora phase; according to the rapid release schedule it will be hit Beta September 17 for an October 29 2013 release.

It’s a good idea to begin using it now, IcoMoon has stealthily adopted it already. You can always download Firefox 25 and take it for a spin first.

Syntax

The default value for -moz-osx-font-smoothing is auto, which renders text with the normal Mac OS X subpixel antialiasing. Unsurprisingly grayscale renders text using grayscale antialiasing. This might not be obvious to people unfamiliar with antialiasing jargon but is actually a more correct term than Webkit’s antialiased.

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; /* Default: auto */
}

Demo

The smaller and more detailed the font is the greater the improvement as antialiasing effects the edges of characters. The difference is most noticeable for light text (or font icons) on a dark background. Here you can see the new property being toggled (using Firefox for Mac Aurora version 25.0a2):

-moz-osx-font-smoothing demo