Using custom fonts, while usually great to spice up a site, can come with a couple drawbacks. One of which is that on some operating system/browser combinations they’ll look jagged. Here’s an example of what I’m talking about.
Some Googling turned up pretty much one solution: Turn on ClearType. Thing is, I don’t want to turn on ClearType and I don’t want to force my visitors to have to turn on ClearType so that option was out.
After some tinkering with various font related styles I stumbled upon
-webkit-text-stroke: 1px transparent; which appears to do the job. Here’s an example of the same text with the above applied.
Does a pretty good job, huh? Unfortunately support for that CSS selector is pretty minimal it would seem, but you can achieve a similar result by instead using
text-shadow: 0px 0px 1px transparent;
Note that we’re using transparent in place of an actual color, this is so we don’t have to apply the code to every single thing that uses a different color, which would be a huge pain in the ass. You can also use rgba(0, 0, 0, 0);, it seems to achieve the same result.
While looking around I found a site that actually references a similar issue. They also use custom fonts. Here’s a before and after with applying the above to their site.