Blog

Background

Font rendering is hard. Getting the fonts you want on the web is even harder because not everyone has the fonts you want to use installed. One solution is to render the fonts as images using canvas or a pre-rendered image.

There is also the CSS @font-face rule, which allows you to specify where your users' browsers should download fonts. Unfortunately, there are some format compatibility issues. Enter the Google Web Fonts API, which takes care of the issues for you by sniffing user-agents. And everyone lived happily ever after.

Chromium

Basically, font smoothing/aliasing has been terrible for Chromium on Windows. On pathery.com, the FAQ page looks like this in Firefox:

and in Chrome:

Note that it looks just fine in Chromium on OS X and Linux.

Previously, the solution was a text-shadow hack which we used. However, when Chrome 15 hit stable two weeks ago, that workaround stopped working. At the same time, the -webkit-font-smoothing property also seemed to stop working.

It's also a bit hard to figure out what the cause of the issue is because font rendering on webkit is broken elsewhere, there are more serious Chromium text rendering issues introduced with Chromium 15, and the "fixes" tend to be CSS hacks.

Fingers crossed

The actual issue was marked as "Hotlist-Fixit" 12 hours ago (after much "plz to fix!1" spam), so hopefully we'll see a resolution on this issue before I start replacing my CSS hacks with Javascript hacks.