Lato with font-weight 300 uses hairline instead of light variant

Question

I've installed the Lato font (from http://www.latofonts.com) on my local machine. It contains several weight variants, such as Hairline, Thin, and Light.

When I create an HTML page and use CSS to select the Lato font, and set the font-weight to 300, the hairline variant is used.

body {
    font-family: "Lato", sans-serif;
    font-weight: 300;
}

Using Google's web fonts, thin is used for font-weight 100, light for weight 300. On the other hand, when using the local fonts, hairline is used for all weights < 400, and there is no way to select the thin or light variants.

How do I use the thin or light variants locally (without Google web fonts), preferably by only changing the font-weight? Is there something wrong in my installation of the fonts, or in the usage?

Sorry, are you asking why Ubuntu is loading the wrong font? Because that's not related to CSS, or HTML, or even programming, and is probably a https://superuser.com question about "why is Ubuntu not using the right font". — Mike 'Pomax' Kamermans, Oct 31 '15 at 21:10
I am having a similar problem. All variants are installed, and I can see "hairline", "thin", "light" etc in gnome-font-viewer. However, in Inkscape the only available font is "Light: Thin" and "Light Italic: Hairline Italic". — arnuschky, Nov 01 '15 at 08:46

Mike 'Pomax' Kamermans · Accepted Answer · 2019-01-21T16:40:39.837

CSS weights are not a formal, real thing in font land, they're just a convention that only CSS uses, and has no effect on weights indicated by fonts as part of a font family. Those values are the usWeightClass in the OS/2 table of OpenType fonts, and can be any number between 0 and 65355, with the numbers being purely based on what the designers/foundry means them to have.

So, looking at the Lato fonts, we see the following weights:

Regular: OS/2.usWeightClass = 400
Light: OS/2.usWeightClass = 300
Thin: OS/2.usWeightClass = 275
Hairline: OS/2.usWeightClass = 250

If you want the CSS to do "the right thing" when you set font weight in CSS, you have to map those CSS font weight to a real resource (which can have a completely different actual font weight) using @font-face rules:

/* Four different rules, for CSS weights 100, 200, 300, 400, same font name */

@font-face {
  font-family: Lato;
  font-weight: 100;
  src: local("Lato Hairline"),
       url("...latohairline.woff2") format(WOFF2);
}

@font-face {
  font-family: Lato;
  font-weight: 200;
  src: local("Lato Thin"),
       url("...latothin.woff2") format(WOFF2);
}

@font-face {
  font-family: Lato;
  font-weight: 300;
  src: local("Lato Light"),
       url("...latolight.woff2") format(WOFF2);
}

@font-face {
  font-family: Lato;
  font-weight: 400;
  src: local("Lato Regular"),
       url("...latoregular.woff2") format(WOFF2);
}

And now your CSS, when using the font family "Lato", will use the correct resource (according to you) based on the CSS font-weight property.

html, body {
  font-family: Lato;
}

h1 {
  font-size: 150%;
  font-weight: 200;
}

p {
  font-weight: 400;
}

...

(2019 edit: changed the font-face to use woff2, because that's the only format you should use by now).

Lato with font-weight 300 uses hairline instead of light variant

1 Answers1