font-weight: 100 is not working in reactjs/javascript

Question

I have problem in implementing font-weight: 100.

I want the my sentence to be ultra light/thin, but when I'm using font-weight:100, is not working.

What should I do? Do I need to import or install something?

I am using reactjs.

<p class="thin">Test</p>

.thin {
  font-weight: 100;
}

Answer 1

In order to use specific font-weight, your font must support it, if it doesn't, then any value between 0 and 600 (not included, normal value is 400) will be interpreted as normal, and any greater value will be bold (bold normally is 700).

If your font doesn't have a light/thin variant, then I'm afraid you can't get a thinner font weight than normal (400).

EDIT NOTE : For fonts than only are normal (400), then bold is generated by default by the browser, for instance :

 @import url('https://fonts.googleapis.com/css?family=Roboto'); p { font-family: 'Roboto'; font-weight: 700; } 

 <p>This is bold, but I didn't loaded Roboto 700, only Roboto 400.</p> 

In this case, the render may differ from one browser to another, although it usually don't.

Answer 2

If you select a font on google fonts you have two choices: Embed it with the default embed code or customize it (in the overlay you get after you select a font)

If you customize it you have the ability to select which font weights you want to include. not every font supports every font weight. if you can't select it, it doesn't exist for this font.