Webfont Smoothing and Antialiasing in Firefox and Opera

Font looks blurry on Firefox

This issue was raised a while back (and fixed) in this thread.

Just to summarize...

The cause:

This firefox issue occurs on Macs where the option: "Use LCD font smoothing when available" (Settings > General > Use LCD font smoothing when available) is checked. (It is checked by default).

Note: From experience, this issue doesn't occur on the actual retina screen of the mac - but rather on non-retina screens connected to the mac.

Uncheck that option and restart firefox and you'll see the font looks fine!

The fix:

To overcome this for users with the above option enabled - simple add the following declaration in the body:

-moz-osx-font-smoothing: grayscale;

You'll be pleasantly surprised.

How to use Anti-aliasing in fonts

Looks antialiased to me in IE10. Font rendering has always been inconsistent between browsers.

If you're using Chrome (or another Webkit browser), try adding this:

-webkit-font-smoothing: antialiased;

Antialiased text in Firefox after CSS rotation

For whatever reason, it seems under some circumstances browsers "forget" to antialias text while doing complex transforms.

The fix:

Using CSS to force the browser to render the transformed element in a separately-composited "layer" is one solution:

transform: rotate(…) translate3d(0px,0px,1px);

The explanation:

Many rendering engine implementations create a GPU layer for the 3d-transformed element, and composite it onto the rest of the page when painting. This alternate rendering path can force a different text-rendering strategy, resulting in better antialiasing.

The caveat:

However, this is a bit of a hack: first, we're asking for a 3-dimensional transform we don't really want; second, forcing many unnecessary GPU layers can degrade performance, especially on mobile platforms with limited RAM.

dev.opera.com hosts a good discussion of compositing, hacks using transform3d, and the CSS3 will-change property.

Anti-aliasing for Chrome and Opera

No, you can't force browsers to render text with anti-aliasing, especially if they've chosen to respect the user's preference to not anti-alias text.