@font-face Smoothing in Windows Chrome

WARNING: THE FIX BELOW IS DEPRECATED IN CHROME 16 + 17. SAD-FACE :(

You may have noticed the issue in which @font-face embeds rendered in Windows Chrome look mighty jagged. Fixes such as -webkit-font-smoothing barely do anything, so this hack relies on a fairly well known fact about Windows Chrome: putting text-shadow on anything makes it blurry as shit. Original implementations of the hack relied on a solid text-shadow colour, but this no longer works in recent updates. It is now vital to enter an rgba() value instead.

Hopefully you will end up with something like this:

h1, h2, h3, h4, h5 {
  font-family: ‘TodaySHOP-BoldRegular’;
  text-shadow: 0 1px 0 rgba(0,0,0,0.01);
}

Real World Examples:

A real world example of this is best demonstrated on my own Front End Development Guidelines. My header tags were smoothed out with a solid hex colour, prior to the rgba() update. They’re still broken to date. Oops.

image

But the problem is much more widespread. Consider this ironic blog post on IE font smoothing by @Koodoz, in which the Chrome problem rears its ugly head again. It leads to some interesting accidental changes, where “hate” has become “hale”.

image

Caveats:

Be aware that this can modify the kerning of the text. There are also situations where the font is hinted in a way that this hack is detrimental. The over-used League Gothic, for example, does not bode well with this method at smaller font-sizes. There were also some comments that this makes Chrome on Mac even blurrier than usual.

Credit:

I’ve been trying to track down who taught me this little trick for a while now. I originally assumed it was @Koodoz, as he invests heavily in @font-face in his designs - but it was news to him. I thought it might be @Rainerbird, as we both read the same kind of stuff online. No dice there either. This blog post also describes the method, but I have probably been using the method just as long and don’t recall visiting that site. The comments and feedback on that blog post are great for further explaining the method and its shortfalls. ■

  1. dope-kun reblogged this from taitems
  2. psdtohtmlshop reblogged this from taitems
  3. theeasytech reblogged this from taitems
  4. download-parallels-til-mac reblogged this from taitems
  5. juanpablos reblogged this from taitems
  6. kopfaction2 reblogged this from taitems
  7. sido reblogged this from taitems