font-weight is not working properly --> css

Question

I am trying to change the font weight of a paragraph in CSS. I have tried thin, bold, normal, 700, 800, 900, but the appearance is not changing.

.p1 {
  font-weight: thin;
}

<p>It was the best of times, it was the worst of times</p>

<p class="p1">It was the best of times, it was the worst of times</p>

Answer 1

I think the font-weight property in CSS usually accepts numeric values or keywords, i.e.,

.paragraph {
    font-weight: 100; 
}

Answer 2

Browser default fonts typically only support one or two weights. So you need to find a webfont which does support multiple weights, for example, Noto Sans.

Some webfonts are available from public CDNs, others you need to host yourself. In either case, you need to add the @font-face rules to your stylesheet. With Google’s CDN, you import these rules from an endpoint which looks like this:

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400;1,500&display=swap');

Then you can use the various weights of font in your page.

 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
p {
  font-family: 'Noto Sans'
} 
.p1, .p1i {
  font-weight: 100;
}
.p2, .p2i {
  font-weight: 200;
}
.p3, .p3i {
  font-weight: 300;
}
.p4, .p4i {
  font-weight: 400;
}
.p5, .p5i {
  font-weight: 500;
}
.p1i, .p2i, .p3i, .p4i, .p5i {
  font-style: italic;
}

<p class="p1">It was the best of times, it was the worst of times</p>
<p class="p1i">It was the best of times, it was the worst of times</p>
<p class="p2">It was the best of times, it was the worst of times</p>
<p class="p2i">It was the best of times, it was the worst of times</p>
<p class="p3">It was the best of times, it was the worst of times</p>
<p class="p3i">It was the best of times, it was the worst of times</p>
<p class="p4">It was the best of times, it was the worst of times</p>
<p class="p4i">It was the best of times, it was the worst of times</p>
<p class="p5">It was the best of times, it was the worst of times</p>
<p class="p5i">It was the best of times, it was the worst of times</p>