White Maskers White Maskers - 3 months ago 21
CSS Question

Font weight value is not working properly

I have tried to give a

font-weight
property to text widgets but it's not working properly, which will show the same bolder appearance for the values
100,200,300,400 and 500
and show a big effect on
600
. What is this issue? How can I fix it?



.flip-menu-text {
text-align: left;
font-weight: 100;
line-height: 1.125rem;
padding: .5625rem 0;
margin: 0;
outline: 0;
border: 0;
font-size: 14px;
}

<span class="flip-menu-text">Widgets</span>




Answer

This has nothing to do with the CSS you provided and more to do with the font in question (which you did not specify).

Take this font, for example. It has 400 (normal), 600, 700 (bold), 800, and 300 font weight styles.

As stated by CSS-Tricks:

In order to see any effect using values other than 400 or 700, the font being used must have built-in faces that match those specified weights.

In short, if you are not happy with the font-weight available, try using a different font.