CODEWITHSUNDEEP
htmlcssfont-facewebfontsgoogle-font-api
user1049944
user1049944

Reputation:

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?

Upvotes: 2

Views: 1632

Answers (2)

RoToRa
RoToRa

Reputation: 38400

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

Upvotes: 1

CookieJarApps
CookieJarApps

Reputation: 335

If you look at the font source by going to the link in the CSS you can see the light font is weight 100, so you can just do this:

body{
    font-family: 'Roboto', sans-serif;
}

.normal{
  font-weight: 400;
}

.light{
  font-weight: 100;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400&display=swap" rel="stylesheet"> 
<!-- 100 is light, 400 is normal -->

<p class="normal">Lorem ipsum</p>
<p class="light">Lorem ipsum</p>

You can get the link by selecting the font in Google Fonts, clicking on the font name in the bottom right hand corner, going to customize and checking all the font weight boxes you need. Then go back to embed and copy the link. Don't just use the weight though - import the link too or you'll get font scaling and spacing problems on Firefox on Ubuntu.

Upvotes: 1

Related Questions