'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

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

Answer 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;

Answer 3

I was running into a similar issue that appeared exactly the same. I was using the CSS font-weight: lighter; while using this google font link:

http://fonts.googleapis.com/css?family=Lato:300,400

Somehow it was displaying as 100 weight! So, I now explicitly use the font-weight:300; to get what I want. I'm not sure, but I believe this likely has something to do with me having the font on my system, and google suggesting my computer uses the system font before downloading it again... Wouldn't have figured it out without this Q and A, thanks!