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.