Font-Weight Is Not Working Properly

font-weight is not working properly?

Its because the font size (9px) is too small to display bold. Try 11px or more and it works fine.

Font weight not working

If I put 600 or more, it becomes bold, as expected. Perhaps if I were to install a thin weight version of the font the lower ones would work. in lieu of that, the browser just defaults to normal or bold.

From Mozilla CSS Reference:

If the exact weight given is unavailable, then the following heuristic is used to determine the weight actually rendered:

• If a weight greater than 500 is given, the closest available darker weight is used (or, if there is none, the closest available lighter
  weight).
• If a weight less than 400 is given, the closest available lighter weight is used (or, if there is none, the closest available darker
  weight).
• If a weight of exactly 400 is given, then 500 is used. If 500 is not available, then the heuristic for font weights less than 400 is
  used.
• If a weight of exactly 500 is given, then 400 is used. If 400 is not available, then the heuristic for font weights less than 400 is
  used.

This means that for fonts that provide only normal and bold, 100-500
are normal, and 600-900 are bold.

Edit: looks like it does support lighter weights

Font weight value is not working properly

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.

Font-weight not propperly showing different pages

Try to put this link for your font :)

<link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700|Work+Sans:100,200,300,400,500,600,700,800,900&display=swap" rel="stylesheet">

Why this class font-weight-bold doesn't work? [Bootstrap]

It's font-weight-bold for bootstrap 4

And class="fw-bold" for Bootstrap 5

Why is google font weight not working?

The font-weight property is set to 500 in the bootstrap css file onto the following elements:

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6

If you want to set the font-weight of an element, you need a selector which is more specific than the default selector (of bootstrap). If you e.g. write a more specific selector like .container-fluid h1 { font-weight: 100; }, you will see, that it affects the element. You could even use the highly non-recommended !important after the CSS rule to override more specific CSS rules.

It is however not reasonable to overwrite all styles of a page with the same font-weight. Usually, e.g. titles have a different font-weight than regular text.

EDIT: In your example, however, you could simply use the h1 selector to select all <h1> elements instead of selecting the .h1 class. You probably made a mistake there. If you have the same specificity of the selector, the order of the CSS stylesheets is relevant. The styles of bootstrap are included before your custom styles, so your custom styles override the bootstrap styles.

---

Related Topics