Arimo Web FontWhen designing a website a lot of time and effort is spent with cross-browser compatibility. Whether it is making sure things work in Internet Explorer or that (if developing responsively) things will work on a mobile device. This takes time and is one of the least enjoyable portions of web development. During the summer I developed the Startup And Play website, and throughout something always felt slightly off. It took me walking away from the project for two weeks to really grasp the problem.

The descenders were being cut off in Google Chrome due to font rendering issues.

The font I had chosen was Arimo from Google Web Fonts. I do not like to self host an @fontface if it is not required, and for most projects this is perfectly acceptable. Here is the side by side example on the latest build of Google Chrome (version 22) on the left and Mozilla Firefox (version 15) on the right running no Windows 7 x64.

Arimo Web Font Chrome Firefox ComparisonYou can notice on the left that the bottom (descender) of the g is cut off in the word Google. This seems to only happen on Windows 7 x64 with Google Chrome. I was unable to replicate the font rendering issues on any other OS/Browser. Unfortunately for me, I develop on Windows with Chrome and struggled with why my designs consistently seemed off. Now I know. How could I miss that?

So I decided to start researching the problem. What I found was that I could not solve the descenders issue, but I did find a bug report from 2011 about the problem. Which was marked as fixed.

On the right is Quattrocento Sans, another Web Font, that has a similar font rendering issue. You’ll notice that while the descender problem is not present, the text rendering is heavily pixelated.

Quattrocento Web Font Chrome Firefox ComparisonThis issue I found can be resolved by testing different font sizes. While not the best workaround, it does eliminate pixelation at certain font points.

With all this said test your fonts. Here is a great article from WebDesignDev concerning Web Unsafe Fonts. While I still don’t have a complete fix for my issue, it has made me much more cautious when choosing a font. Especially so if you are unable to text on every possible browser/operating system combination.

Update 10/31/2012:

Just recently while browsing Reddit I stumbled across a blog post from adtrak that claims to have fixed the chrome font rendering issues. I have not confirmed this fix to work, though it seems simple enough to implement in a development environment.

Update 05/25/2013:

Google is working to enable Direct Write in Chrome.

Our Windows font rendering is actively being worked on. Basic support for DirectWrite is now in Skia (to update from comment #13). At the same time, GDI was very deeply embedded in the Windows WebKit port and is still being rooted out. We hope to have something within a milestone or two that developers can start playing with. How fast it goes to stable is, as always, all about how fast we can root out and burn down any regressions.