Getting Google web fonts to display font-weight 100

Question

I am having trouble getting the Lato font to display ultra thin using Google web fonts. It is as thin as it should be on Google's page, but does not change its weight when I use it on my own page below 400 (I can go extra bold, bold and normal, but no thinner). This persists in both Chrome and Firefox.

I've tried the following variations of declaring the font:

font: 100 1em/1.5em 'Lato';
font: normal 100 1em/1.5em 'Lato';
font: normal 100 1em/1.5em 'Lato', sans-serif;

as well as without the shorthand version and using pixels for the font-size property like the font demo page. I've also tried several font sizes thinking maybe it can't render at smaller sizes, but this didn't make a difference. This is the only css on the page so there are no other rules that could be overriding it.

What else can I try?

Answer 1

You can amend your CSS this way:

font: 100 1em/1.5em 'Lato';
font: Ultra-Light 100 1em/1.5em 'Lato';
font: Ultra-Light 100 1em/1.5em 'Lato', sans-serif;

Also, make sure you have included the 100 weight of the Lato font, which is not included by default. If you need, the URL is:

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

Fiddle: http://jsfiddle.net/praveenscience/AtdqY/