CODEWITHSUNDEEP
htmlcssfonts
Reece
Reece

Reputation: 2711

Font weight not working

I am having a problem getting the lighter font weights to work. I have font with all the weights I want to use on my computer yet it won't work. I found that A lot of fonts wont work with lighter weights. Whats going on?

https://jsfiddle.net/ywr2ks1p/

p{
  font-family: museo sans;
  font-weight: 100;
  font-size: 50px;
}
<div>
  <p>
  hello I am some text
  </p>
</div>

Upvotes: 3

Views: 11878

Answers (2)

Ravi Rane
Ravi Rane

Reputation: 159

check font family. Few of them will show normal weight till 500. E.g. font-family: Rubik, sans-serif; will not show much difference when weight is till 500

Upvotes: 0

irowe
irowe

Reputation: 636

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

Upvotes: 9

Related Questions