font-weight page doesn't explain whether it is possible to set a range, or if so, how

[MarjaE2]

MDN URL

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

What specific section or headline is this issue about?

It's an overall issue

What information was incorrect, unhelpful, or incomplete?

1. It doesn't explain whether it is possible for users to set a range. For example, users who have trouble reading thin text may want to set a minimum font-weight, without forcing all text to the same weight.
2. If that is possible, it doesn't explain how.
3. It mentions "multiple values" but doesn't explain if these set a range, and doesn't explain what else they do.
4. If multiple values are supposed to set a range, then in Firefox they are ignored as an error.

What did you expect to see?

Information for users to set font-weight so that more pages will be readable.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

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: acfe8c9
• Document last modified: 2023-07-07T07:19:19.000Z

[OnkarRuikar]

There are two pages titled font-weight on MDN:

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

The first one, which takes only one value, is a property that is applied on elements in html:

div {
  font-weight: bold;
  font-weight: 100;
}

The second one, which can take two values, is applied only in context of the @font-face at-rule:

/* font definition */
@font-face {
  font-family: "MyCoolFont";
  src: url(./assets/fonts/my_cool_font.woff2);
  font-weight: 600 900;  /* here the range tells browser to select this font if weight lies in between 600-900 */
}

/* font use */
div {
  font-family: "MyCoolFont";
  font-weight: 700; /* here we tell browser that we want text of 700 weight */
}

You can play with it on MDN playground.

---

Perhaps you meant to look at the first page CSS/font-weight. To avoid the confusion we need to use a different title for @font-face/font-weight page, something like @font-face: font-weight.

@estelle @wbamberg Should we retitle all the pages under @font-face hierarchy like @font-face: prop?

[wbamberg]

@estelle @wbamberg Should we retitle all the pages under @font-face hierarchy like @font-face: prop?

Yes, I was thinking the same thing, it is very confusing having both pages with the same title, especially when most of the syntax is the same as well. But it is a whole conversation, and opens the question of whether we should also have more informative titles for other CSS pages, like "font-weight property".

[MarjaE2]

Rather than retitling, I'd suggest cross-linking to related pages at the beginning of each article. It mentions the other pge early on, but I thought it must be linking back to itself.