Skip to content

Instantly share code, notes, and snippets.

@jaydenseric
Last active August 5, 2019 05:05
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jaydenseric/9c431d3a4f1d21ecc40c9d2a61e63167 to your computer and use it in GitHub Desktop.
Save jaydenseric/9c431d3a4f1d21ecc40c9d2a61e63167 to your computer and use it in GitHub Desktop.
“CSS font smoothing coming to Firefox for Mac” blog post: https://jaydenseric.com/blog/css-font-smoothing-for-firefox-mac.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment