want to use lato light - font weight not changing

Question

Want to use Lato light.. the following didn't work:

body {
    font-family: "lato"; 
    background-color: white;
    font-weight: 300; 
}

What could be wrong?

Answer 1

In order to be able to use a particular font-weight you first have to load it.

Practical solution:

Replace your <link> tag importing Lato with this one:

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">

Please note the family:Lato:300,400,700 part. Change it to suit the font-weight needs of your project. If you use Latin Extended subset, you'll also need to add it in, by changing the link to

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700&subset=latin-ext" rel="stylesheet">

---

You can dig deeper and serve the font files from your server but, overall, that's not recommended in terms of page speed.

Answer 2

This is not a lot of info to go off of, but I will say this. To change the font weight on any font you need to include to include a different a font file for each font weight. If for example you are pulling in "lato" from google fonts using this link

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

then only the default font weight (400) will be pulled in. In order to include a different font weight (such as 300) you need to add that to the link like this

<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">

Notice now it will pull in font files for 300 and 400.

If you are using your own font files, not google fonts, you will nedd to include the font style sheet for 300 yourself.