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

I had the same issue. The question was asked almost 5 years back, but the problem still persists. I am using Chrome 69.

In my project when google font is used I got blurry text.

I use the google font via below code :

https://fonts.googleapis.com/css?family=Roboto:400,600,800' rel='stylesheet' type='text/css'>

And the most important part in font-weight properties I always use

font-weight: bold

Solution: Now if you use 400,600,800 as normal, semi-bold and bold, of course then replace it with

https://fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold' rel='stylesheet' type='text/css'>

Note: I am sharing a solution which solved my issue. It may not apply to your situation.

Answer 2

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.