'Lato' font rendering odd in safari, not in chrome, or firefox

Question

Im using the 'Lato' font from google web fonts, and its displaying fine on all browsers apart from safari.

Im using it in font-weight:100;

here are some screen shots of the different browsers. Any idea what might be causing it to render extremely thin ? Or if theres a way i can set it to render in font-weight:300; for safari only ?

Ive also made a js fiddle of the problem - http://jsfiddle.net/qLHuc/1/

FIREFOX

CHROME

SAFARI

Solution 1

I'm not sure why, but Safari is disabling subpixel antialising at small font sizes on that page. You can fix it by applying -webkit-font-smoothing: subpixel-antialiased. See here: http://jsfiddle.net/qLHuc/3/

However, I think you should consider using a heavier font. Have you tested this on Windows? It will likely look very, very light. OSX renders text very heavily when subpixel antialiasing is enabled, and especially heavily when text is against a dark or colored background. What you see in your Safari screenshot is similar to what people who aren't on OSX will see.

Solution 2

I also faced similar issue, when I tried to use google fonts with font-weight:300 - its working fine in all browsers except safari.

I resolved this by adding below css property.

-webkit-font-smoothing: antialiased;