Search code examples
htmlcssfont-facewebfontsgoogle-font-api

Roboto 'Thin' with Google Fonts


So I'm trying to get Roboto Thin working in my CSS through Google Fonts

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:bold&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:thin&display=swap" rel="stylesheet">

I can get the normal Roboto working just fine, but not when I try to specify the thin weight like so:

body {
    font: 16px/21px Roboto, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
}

h1, h2, h3, h4, h5, h6 {
    font-weight: thin;
}

It just gives me the regular weight... can anyone see what I'm doing wrong?


Solution

  • thin is not a valid keyword for font-weight. According to Google Fonts (when you select "Roboto" and then look at the "customize" list of weights) Thin corresponds to a weight of 100