Font-Face, Text-Shadow, and Google Chrome

Anybody else come across a nasty bug in Chrome when using @font-face with a text shadow? Your text gets all thin and scrawny as soon as you drop the shadow on.

It seems that this only occurs when viewing Google Web Fonts in Google Chrome. And unfortunately, this hasn’t been fixed even in the canary release of Chrome (v16).

However, there is a solution. Some guy has figured out a clean hack to get around the problem. Obviously you’ll want to declare a hex color first for older browsers, then your rgba color. Only new browsers pick up on the second declaration, and the color difference is negligible.


text-shadow: 2px 2px 2px #000;
color: #FFF;
color: rgba(255, 255, 255, 0.99);

I hope this helps mitigate some of the frustration the good CSS developers of the world are experiencing!

UPDATE:
This bug was fixed in Chrome version 18.