Bold Fonts in Google Chrome are Blurry (@Font-Face)

Question

Recently after upgrading my Google Chrome browser to Version 32.0.1700.76 m I noticed that bold fonts have a blur/drop shadow effect on my sites using @font-face.

Here is an example site with bold text.

Here is an example site with bold headers.

Before updating my Chrome these sites were displaying font correctly, I have tested fonts in the following browsers and they are still displaying correctly:

• Firefox 26.0
• IE11
• Opera 12.11
• Safari 5.1.7

Is there any way to stop this blur effect other than downgrading Google Chrome?

EDIT

I sent a error report to Google about this issue and it seems like they have reverted the "blurry" effect on fonts. To avoid this issue go with Jukka K. Korpela's solution.

Answer 1

In the examples, you have declared only normal (regular) typefaces for Gotham and Sansation in @font-face rules, yet try to use bold face. This makes browsers apply algorithmic (synthetic) bolding, with varying results.

The solution is to get bold typefaces and declare them, in @font-face rules that have font-weight: bold.