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

14,104

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

Solution 2

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.

Share:
14,104
AfromanJ
Author by

AfromanJ

Front end developer.

Updated on July 29, 2022

Comments

  • AfromanJ
    AfromanJ over 1 year

    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.