1

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>
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 1
    check out this answer: http://stackoverflow.com/questions/8872486/font-weight900-only-working-in-firefox#comment11088683_8872514 – Sankar Aug 31 '16 at 04:11

1 Answers1

2

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.

James Taylor
  • 6,158
  • 8
  • 48
  • 74
  • No, they don't have the same effect. Whatever font you're using simply doesn't have a font definition for the `500` font weight, so it defaults to the non-bold version. – James Taylor Aug 31 '16 at 04:21