16

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

enter image description here

CHROME

enter image description here

SAFARI

enter image description here

sam
  • 9,486
  • 36
  • 109
  • 160
  • 3
    100 is extremely light. Are you sure that Safari isn't the only one rendering it properly? Does it look any different at 300 on Chrome and Firefox? – Chris Herbert Mar 14 '13 at 15:55
  • Yeh, normaly i would go with 100 text, buts its a 24px sub heading so it dosnt really fade into the background. the above images are 1:1 scale. I tried it in 300 and in safari 300 looks like the 100 of all the other browsers. In chrome and firefox 300 looks thicker – sam Mar 14 '13 at 16:10
  • Make a jsfiddle for us. – Chris Herbert Mar 14 '13 at 16:20
  • Also - do you have -webkit-font-smoothing: antialiased applied to the element? – Chris Herbert Mar 14 '13 at 16:21
  • @ChrisHerbert - ive tried that but dosnt seem to help, ive also made the jsfiddle, please see amended question above, regards – sam Mar 14 '13 at 17:53
  • It's being rendered every lightly in chrome on linux v.23 – Ryan Mar 14 '13 at 17:57
  • @ryan - ive just updated the fiddle to use - subpixel-antialiased, whats it like here - http://jsfiddle.net/qLHuc/2/ – sam Mar 14 '13 at 17:57
  • Still very light, I can almost not see it at all. at 300 it looks like what it does in your screen shots above. – Ryan Mar 14 '13 at 18:00

3 Answers3

16

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.

Chris Herbert
  • 6,145
  • 3
  • 19
  • 31
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;

Srinivas
  • 133
  • 6
0

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!

counterbeing
  • 2,721
  • 2
  • 27
  • 47