Today I had to add a new font face to a website, it was called “fat” and was even bolder than “black”. The common
font-weight for black is
900, so I went above that and chose
font-weight: 1000 for the fat font face but that brought me into trouble with the font not loading in Safari. So I started reading up on the topic, because before I never used such a high value or thought much about it.
The MDN web docs say about
A value between 1 and 1000, inclusive. Higher numbers represent weights that are bolder than (or as bold as) lower numbers. Certain commonly used values correspond to common weight names, as described in the Common weight name mapping section below.
but then it continues:
In earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900. CSS Fonts Level 4 extends the syntax to accept any number between 1 and 1000. This enables variable fonts to provide a much finer-grained range of font weights. Note that this is not yet supported by all browsers.
The CSS Fonts Level 4 are only a W3C Working Draft at this point. It got updated last on September 20th 2018.
font-weight values over 900 or generally values other than 100, 200, 300, 400, 500, 600, 700, 800, 900 are not allowed/working. CSS Fonts Level 4 will update that so you can use any number between 1 and 1000, including 1000, mostly because of variable fonts. But Chrome and Firefox seem to accept different values like 980 or even 1000 already for normal fonts just fine, but not Safari.
What got me confused today was only that the MDN web docs flip flop between what values are allowed. I think the page should only list the CSS Fonts Module Level 3 values in the general sections.
Don’t get me wrong, I love the docs and use them all the time, I just wanted to share my journey from today. And I should probably find out how to propose and update for the font-weight page.
Okay, so you can just connect your Github account to MDN and edited pages. I just published an update to the font-weight page according to my research. I also requested for technical review. Let’s see how this goes. How exciting!