I've decided to use the Google Web Font "Signika": http://www.google.com/webfonts/specimen/Signika
While I absolutely love the way this font looks when rendered correctly, some browsers or platforms don't offer this luxury to their users.
Here's what I've observed:
- Arch Linux - Latest Chromium - Perfect
- Arch Linux - Latest Firefox - Perfect
- Win7 64-bit - Latest Chrome - Poor (same as the image on the right, if I recall correctly)
- Win7 64-bit (virtualbox VM) - Latest Firefox - Poor (see image below)
- Win7 64-bit (virtualbox VM) - IE9 - Perfect?? (see image below)
The last 2 surprise me. Here's the comparison of rendering with IE9 on the left and Firefox on the right. Both are on the same machine (Win7 64-bit virtualbox VM).
The one on the left looks like it's been smoothed out -- pixels are not either black or white, but also in-between. The one on the right looks like it's only using 2 colors.
When IE9's browser mode is set to IE8 or IE7, the fonts begin to look like in Firefox on that machine (not smooth).
I'm trying to make sense of this. What exactly is happening, and can anything be done to make it look smooth? I've looked around for similar problems and tried the following suggested fixes/workarounds:
font-smooth: always;
-webkit-font-smoothing: antialiased;
and
text-shadow:0 0 1px transparent;
with no effect. (Tried them on Win7 64-bit (virtualbox VM) with latest Firefox)
Any suggestions would be appreciated!