Search code examples
htmlcssgoogle-chromefont-face

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

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.

enter image description here

Here is an example site with bold headers.

enter image description here

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.

Solution

  • 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.