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;
}

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;
}

• javascript
• css
• reactjs

Share Improve this question Follow edited Dec 29, 2017 at 9:00 ChrisM 1,58666 gold badges2222 silver badges2929 bronze badges asked Dec 29, 2017 at 8:51 DriDri 4511 silver badge77 bronze badges 5

• 3 To use this font weight, your font must support it. If you're using Google fonts, try including it with the necessary weights. – 31piy Commented Dec 29, 2017 at 8:52
• Try font-weight: 600; it will change as bold – Nitin Dhomse Commented Dec 29, 2017 at 8:54
• Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold – Nitin Dhomse Commented Dec 29, 2017 at 8:55
• @31piy, what should I include ? – Dri Commented Dec 29, 2017 at 9:00
• I want it to thin it more than just 400, is there any way ? – Dri Commented Dec 29, 2017 at 9:01

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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./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.

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.