@font-face/font-weight: expand on <font-weight-absolute>{2} importance

[danburzo]

MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight

What information was incorrect, unhelpful, or incomplete?

There should be more ample space devoted to font-weight ranges (<font-weight-absolute>{2}) required for variable fonts to work reliably across browsers.

I've only just started writing my first variable font CSS today, off the cuff, so I don't have an insight on the history of the spec / known browser quirks, but pretty soon I discovered that not mentioning a font-weight range in @font-face causes issues in Chrome and Safari.

In particular, the example in the Variable fonts section of the more famous font-weight CSS property of the two currently doesn't work in Chrome due to this omission. I have opened a PR on the css-examples repo to address it:

• variable-fonts/font-weight.html: Add font-weight range to @font-face declaration css-examples#56

What did you expect to see?

The expansion of the "Variable fonts" section with a note about the importance of adding a font-weight range, and ideally an sample @font-face declaration for variable fonts in the Examples section.

Did you test this? If so, how?

Tested before/after code in the aforementioned PR in Chrome.

MDN Content page report details

• Folder: en-us/web/css/@font-face/font-weight
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/@font-face/font-weight/index.md
• Last commit: 26f50bd
• Document last modified: 2021-08-12T23:59:09.000Z