Are All CSS Font-Weight Property's Values Useful

Are all CSS font-weight property's values useful?

If the font you are displaying has more weights like semi-bold, light, etc. the browser may be able to render those weights if you use one of the numeric values. Most end-user fonts come with two or three styles only, though, so I don't think this is much applicable to the real world. I would rely on normal (=400 I think) and bold (=700) only.

There's good additional info in the W3C reference on font-weight: bold as well.

Update: Here is an in-depth blog post on how the styles are rendered in modern browsers. It is titled "Font-weight is still broken in all but one browser" :)

2nd Update: As clagnut.com suffered a catastrophic dataloss here is the archived post

is it necessary to place font property in order

Yes, you must maintain the order. For more info view the below image for ordering:

source

Why is the default font weight 400?

Not "400 what", just 400. As per the CSS specification, first formalized in https://www.w3.org/TR/CSS1/#font-weight. there are nine levels of font weight, represented as unitless numbers, starting at 100 and ending at 900, in 100 increments.

In addition to this, the spec defines two mappings between numerical value and string value:

• the numerical value 400 and the string value normal are the same thing, and
• the numerical value 700 and string value bold are the same thing

(Note that while CSS4 will change this to allow for the numbers 1-1000 in increments of 1, it will still only officially recognise the string values normal and bold, still mapping to 400 and 700 respectively. See https://drafts.csswg.org/css-fonts-4/#font-weight-prop for more information)

The only formal rules around these weights is that if you're using a font family in CSS context, a font weight of 400/normal should get you whatever is that font family's Regular typeface, and a font weight of 700/bold should get you whatever is the font family's Bold typeface. Anything else is left entirely undefined, and all you know is that 100, 200, and 300 are probably lighter than 400, 500 and 600 are probably in between regular and bold, and 800 and 900 are probably heavier than 700.

All of those are qualified as "probably" because @font-face gets to completely invalidate everything about this. If you use @font-face, you overrule CSS's rules for what those numerical values mean entirely. For example: this rule will effect an ultra-thin font when you set font-weight to 900, because that's what we're telling the browser it must do:

@font-face {
  font-family: MyFont;
  font-weight: 900;
  src: url("./fonts/ultra-thin.woff2") format("WOFF2");
}

Also important to know is that these are the only two official number/string mappings. Officially there are no other mappings, and the table of numerical values in https://drafts.csswg.org/css-fonts-3/#font-weight-prop is there purely to illustrate which real CSS values map to which rough names people tend to use for them.

The most important part is that this only applies to CSS. It has nothing to do with actual font-stored values, or things you see in word processing software, etc.

Font-weight values not working

If you want to use a different type of font weight, it is important that your font supports this weight type.

If the font doesn't have a 500 or 600 type, it is not possible to use this font weight. The browser will automatically pick the closest value to the font that is available. In this case 600 will change in the 700 which is supported

Is there a way to say use the current font weight without making it lighter/bolder?

font-weight doesn't have a special keyword value for the "current weight". Instead, you use the CSS-wide inherit keyword to inherit the weight from the parent element (the element that contains the so-called "surrounding text" along with the element in question):

strong {  font-weight: inherit;  text-transform: uppercase;}
header {  font-weight: bold;}

<header>  <h1>Header</h1>  <p>This is a <strong>header</strong>.</p></header><footer>  <p>This is a <strong>footer</strong>.</p></footer>