Fix 32619: clarify font-weight descriptor

[wbamberg]

Fixes #32619.
Fixes #10910

This is an attempt to improve the page on the font-weight descriptor. I think #32619 was fundamentally caused by the fact that this page isn't very clear about what the font-weight descriptor is, how it relates to the font-weight property, and how it is used. It includes stuff which is just wrong:

The values for the CSS descriptor is same as that of its corresponding font property.

...and stuff which makes it sound like this is the page for the property:

The font-weight property is described using any one of the values listed below.

I've rewritten the description and syntax sections, more or less, and added two live samples that I hope show how this can actually be used.

I'm no expert here so might have mangled things. I do think though that this documentation could be improved. I think we should probably have glossary entries for font, font face, typeface, font family. We should probably have a proper guide to using @font-face - this is the only thing I could find and it's very basic. And if these changes or something like them are good, we should probably do something similar with the other descriptors.

Oh, the live samples don't work, maybe because preview is broken? Sorry, you might need to test this locally.

[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-10-29 20:43:17)

[wbamberg]

@bsmth , I know you care about the repo size, and this PR adds some sample fonts to the repo, and one of them at least is quite big (127K). There was some chat before about having a separate repo for assets that live samples could refer to. That still feels like the proper solution. Do you know what the status of this is? I see https://github.com/mdn/shared-assets exists, can it be referenced from live samples in mdn/content?

[bsmth]

@bsmth , I know you care about the repo size, and this PR adds some sample fonts to the repo, and one of them at least is quite big (127K). There was some chat before about having a separate repo for assets that live samples could refer to. That still feels like the proper solution.

Yes, that was the idea, indeed.

Do you know what the status of this is? I see https://github.com/mdn/shared-assets exists, can it be referenced from live samples in mdn/content?

This can't be used yet, my hope was that it would be added to a GCP bucket that we could reference like demo-assets.developer.mozilla.org or something along those lines. I'm going to check again what the status is shortly and I'll come back to this PR with some info.

[bsmth]

Hey @wbamberg - quick update to get something going in the meantime: I've enabled gh-pages for the assets repo in mdn/shared-assets#8

This allows you to use the fonts from that repo and add your own if you need different ones. The examples cleanup work we'll be doing later in the year will likely consider this assets repo and have more robust deployment, but that should unblock you for now (although we may need a CSP entry for mdn.github.io/shared-assets)

[bsmth]

Just a reminder you can use any of these instead of landing the assets in the content repo:

https://github.com/mdn/shared-assets/tree/main/fonts

i.e., https://mdn.github.io/shared-assets/fonts/FiraSans-Light.woff2

[wbamberg]

OK, now we're using Fira Sans and League Mono!

[Josh-Cena]

I am linking #10910 to this PR. Would be helpful if you could see if there's anything else to be done about the issue, but I think it already suffices as a fix.

[Josh-Cena]

@wbamberg @estelle Is it possible that either of you could finish this PR? This is currently one of the oldest ones.

[wbamberg]

Sorry @Josh-Cena . I will attempt to remember what's going on here.

[estelle]

I am breaking things