CODEWITHSUNDEEP
cssgoogle-chromefontscss-transitions
fender967
fender967

Reputation: 285

Why does the google font look so bad in Chrome?

http://bbmthemes.com/themes/smart/

All of the font sizes of the common free font "Open Sans" look great in firefox, but when I view the site in Chrome the edges are horribly pixelated and the letter spacing isnt even the same. Is there anything that I can do to fix this? I need to use google fonts, rather than @font-face.

Upvotes: 2

Views: 8204

Answers (3)

PottyBert
PottyBert

Reputation: 1982

I've found that regenerating the font using a tool like fontsquirrel.com to create a kit you host yourself, solves most of chrome's font rendering issues.

I presume that the chrome font issue is to do with the way google optimizes the font vs the way font squirrel does it.

Upvotes: 0

ewwink
ewwink

Reputation: 19164

I'm using text-shadow and it called with javascript to fix opera and chrome only

if(navigator.userAgent.match(/chrome|opera/i))
{
  document.body.style.textShadow='rgba(0,0,0,0.3) 0px 0px 1px';
}

demo: http://jsfiddle.net/cQS7w/3/

Upvotes: 0

jsuissa
jsuissa

Reputation: 1762

Your options are a bit limited, but one thing that can help specifically for Chrome for Windows is changing the the order of the embedding of the font files. This article has more detail on this tip.

Article on improving font smoothing in Chrome

Another factor may be the use of CSS transitions. I've seen instances where that seems to affect the font smoothing. It's worth experimenting to see if you get better results on the anti-aliasing without them.

Other answers on this subject on stackoverflow

Upvotes: 2

Related Questions