Chrome's Font Face Anti-Aliasing Issue

Stumbling across this article, I suspect you've had the same frustration I had trying to understand why some fonts have been rending differently in Chrome. This is because Chrome renders fonts with subpixel anti-aliasing, which in turn can make fonts look more jiggered than other browsers. And to make things even more complicated, this only applies to Font-Face fonts below 49px for some reason (49px and above renders fine).

Let's take a look at our font-face code:

Google Chrome 18.0.1025.100 beta-m - Georgia at 48px:

Google Chrome 18.0.1025.100 beta-m - Georgia at 49px:

After trying multiple "solutions", nothing worked besides bumping all titles to larger than 49px –this was definitely not a solution. After scrawling through forums, I had a closer look at the font-face code and adjusted the order of references by having the .SVG reference first - still nothing. I tried almost everything, even removing the reference for the .SVG #FontName after the .SVG font reference, and funnily enough it worked! Removing this #FontName reference fixed the .SVG font-face rendering and had no impact on other browsers – winning!

Modified Font-Squirrel code: