Font weight on google font's nunito sans not working

Question

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

Answer 1

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>