CODEWITHSUNDEEP
htmlcssfontsgoogle-fonts
sofuslund
sofuslund

Reputation: 127

Font weight on google font's nunito sans not working

When I import the Nunito sans from google fonts and set different font weights to different paragraphs they all get the same font weight for some reason. It works with other fonts how can I make it work with Nunito sans? This is the code for a minimal reproducible example:

p {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 32px;
}

.p1 {
  font-weight: 300;
}

.p2 {
  font-weight: 600;
}

.p3 {
  font-weight: 800;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,600;0,800;1,300&display=swap" rel="stylesheet">

<p class="p1">should be light (300)</p>
<p class="p2">should be semibold (600)</p>
<p class="p3">should be extrabold (800)</p>

Here's a Codepen that shows the problem: https://codepen.io/sofusl/pen/eYVyPVJ

Upvotes: 1

Views: 2809

Answers (1)

Andi
Andi

Reputation: 2992

Remove ital from your font-family link. Not sure how that got there when you were setting it up but it's likely why you're getting the undesired results.

p {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 32px;
}

.p1 {
  font-weight: 300;
}

.p2 {
  font-weight: 600;
}

.p3 {
  font-weight: 800;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@0,600;0,800;1,300&display=swap" rel="stylesheet">

<p class="p1">should be light (300)</p>
<p class="p2">should be semibold (600)</p>
<p class="p3">should be extrabold (800)</p>

Upvotes: 2

Related Questions