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?

Piranesi

Have you made sure you have included the 100 weight in your Google Web font script reference? – Injurious

First example should work. Are you also loading that 100 weight font from GWF? jsfiddle.net/9T3Tw – Cappadocia

I wasn't loading the 100 weight explicitly, thanks! – Piranesi

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/

Aeriela

Adding Ultra-Light didn't seem to be valid CSS, but correcting the URL did the trick! I didn't realise I had to specify each weight separately, thanks! – Piranesi

@Piranesi Glad you found out the problem. Even I had the same issue, when tried it. – Aeriela

Please correct the answer; as it stands, it is plain wrong, since there are no keywords for font weights in CSS except normal and bold (and relative keywords). – Rutty