@font-face giving ultra-heavy font weight and/or bad anti-aliasing

Question

I found an open font I liked (Crete Round) and designed some screens in Photoshop with it. When it came time to set up the CSS, I tried using both Google Fonts and fontsquirrel.com's downloadable "kit" (a zip file with four different types of fonts and a ready-made stylesheet), but both gave me strange results on Mac.

Photoshop — What I want it to look like:

Yuck — Chrome (and Safari) on Mac using an @font-face kit from fontsquirrel.com:

Chrome (and Safari) on Mac using Google Fonts (basically identical):

GOOD —Chrome on Windows (fontsquirrel):

GOOD — Hack. I found out that with any opacity (not text color alpha) less than 1.0, Chrome gave me good results (but Safari was still bad.)

Chrome on Mac using fontsquirrel, with opacity:0.999;:

Does anyone have any ideas on what is going on here, or what I might be doing wrong?

Answer 1

I don't think you are doing anything wrong. I also don't think there is a way around it, other than to use images instead of text where the style is absolutely crucial.

I found THIS LINK which discusses rendering engines on different operating systems (also taking different browsers into consideration).

I hope this helps!

Answer 2

try

html { -webkit-font-smoothing: antialiased; }