@ font-face gives extra heavy font weight and / or poor anti-aliasing

Question

I found an open font that I liked ( Crete Round ) and designed several screens in Photoshop with it. When it came time to customize CSS, I tried using both Google Fonts and fontsquirrel.com a downloadable “kit” (a zip file with four different types of fonts and a predefined stylesheet), but both gave me weird results on a Mac.

Photoshop - I want it to look like this:

Yuck - Chrome (and Safari) on Mac with the @ font-face set from fontsquirrel.com:

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

GOOD . Chrome for Windows (fontsquirrel):

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

Chrome on Mac using fontsquirrel, opacity:0.999; :

Does anyone have any ideas on what is going on here, or what can I do wrong?

Answer 1

I don’t think you are doing something wrong. I also don’t think there is a way around this except using images instead of text, where style is absolutely important.

I found THIS LINK , which discusses rendering mechanisms in different operating systems (different browsers are also taken into account).

Hope this helps!

Answer 2

try

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