I haven't found anything online about any possible issues with Chrome's handling of @font-face, but for some reason, in both XP and Vista in Chrome 4.0.249 and above, this site shows a corrupted version of the embedded font in the header and footer. However, when any of the embedded fonts are used on a white background, like in the main content area, Chrome displays them without a problem.

Does anyone have any ideas as to why I'm getting the corrupted output? Is this a bug with Chrome or is there something wrong with the site?


Here are some screenshots of what is happening:

Header Footer

  • I haven't a clue what's wrong, but I can confirm the behaviour. Richard Grevers about 9 years ago

2 answers


I'm pretty sure it's a Chrome bug. If you use text-rendering: optimizeLegibility; in any element that uses @font-faced fonts with a text-shadow, the text doesn't display properly. Eliminating text-rendering: optimizeLegibility; fixes it. See a live example

I'll be submitting a Chromium bug report.

Answered about 9 years ago by Andrew Heiss
Mottie 1134

Try using Paul Irish's bulletproof @font-face syntax. The CSS is also included as part of Font Squirrel's @font-face generator.

Answered about 9 years ago by Mottie
  • I'm already using the bulletproof syntax. It's a bug in Chrome when using text-shadow at the same time as optimizeLegibility. Andrew Heiss about 9 years ago