Fonts-weight descriptor

[estelle]

Replaces #32853
Fixes #32619

[github-actions]

Preview URLs

• /en-US/docs/Web/CSS/@font-face/font-weight

External URLs (2)

URL: /en-US/docs/Web/CSS/@font-face/font-weight
Title: font-weight

• https://fonts.google.com/specimen/Fira+Sans (1 time) (Note! This may be a new URL 👀)
• https://www.theleagueofmoveabletype.com/league-mono (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2024-11-13 18:04:58)

[wbamberg]

I don't understand the point of this example. Why would someone want to use a range here?

ISTR when I looked into this the only use case I could see for a range was to limit the weights available in a variable range font.

[estelle]

i've actually seen this done in the wild. redacted had 6 different font names for the same font in different ranges, and they updated the font-family name for every font-weight property. People do it, so we need to demonstrate it.

[wbamberg]

But what's the use case for it? As someone trying to learn this feature, I look at this and think, why would anyone want to do this, what does it accomplish?

People do it, so we need to demonstrate it.

I'm not sure I agree with this. People do all kinds of things, but we should demo sensible use cases.

[wbamberg]

Also, this:

redacted had 6 different font names for the same font in different ranges, and they updated the font-family name for every font-weight property.

...isn't what's happening here, is it? This has the same font-family name.

[estelle]

no; here we are using one font family name. I'll add to the pre-explanation.

[wbamberg]

Sorry if I'm being thick, but the previous example demonstrates this use case as well, doesn't it? (and is not contrived, AFAIK it is showing the main use case for font-weight). So what is the point here of using a range?

[estelle]

Because if you do a bunch of fonts weights, such as : 300, 400, 500, 600, etc. and one of your devs writes 350, and you want to control which font the browser chooses in such a case, this does that. The previous example is only "normal" and "bold", or 400 and 700. Which should be chosen at 550 in the previous example? putting a range defines that.

[wbamberg]

OK, I think that makes sense! But then I still don't understand why the second range is a subset of the first. Why do we want to select the non-bold font when the dev writes 1000?

I also wondered if you could do this without ranges, like this:

@font-face {
  font-family: "Fira Sans";
  font-weight: 1;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Light.woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: 200;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Regular.woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: 400;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Bold.woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: 900;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-ExtraBold.woff2");
}

What do ranges give you over this?

[wbamberg]

It looks like this^ gives some results that I would not (naively) expect, in particular font-weight: 600; selected extrabold.

With something like this:

@font-face {
  font-family: "Fira Sans";
  font-weight: 1 199;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Light.woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: 200 399;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Regular.woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: 400 899;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Bold.woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: 900;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-ExtraBold.woff2");
}

... I get the results I was expecting.

[estelle]

i used something similar to your example; the ranges are slightly broader so i can explain the cascade (and so we don't need to clarify 399.5)