Better documentation for font-face

[wbamberg]

Problem statement

This came out of mdn/content#32619, which I think happened because we don't document @font-face descriptors and their relation to the corresponding properties very well. I filed mdn/content#32853 which I think is probably an improvement but in the course of looking into that I thought there are bigger problems in our documentation of @font-face, and probably other aspects of fonts in CSS.

• there's no guide to using @font-face
• we use technical terms that are widely misunderstood, but don't define them
• the pages on @font-face descriptors don't do a good job of explaining them or how they relate to the corresponding properties.

Proposed solutions

This includes:

• we should have glossary entries for various terms, like "font", "font face", "font family", "typeface"
• we should have a thorough guide on @font-face. Currently we have a bit on this in Learn (https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts) but it's very basic.
• we should check through all the pages on @font-face descriptors to ensure they make sense.

Task list

• [ ]

Priority assessment

• Effort: medium
• Dependencies: none - except, good examples here mean we need to include sample fonts in the repo, which are big. A technical solution (like a separate example-fonts repo that we can refer to from live samples) might be good.
• Community enablement: n/a
• Momentum: n/a
• Enabling learners: yes
• Enabling professionals: yes
• Underrepresented topics / Ethical web: n/a
• Operational necessities: n/a
• Addressing needs of the web industry: yes

More information

Open Web Docs (OWD) is a non-profit collective funded by corporate and individual donations.

In order for this project to happen, please consider donating to OWD at https://opencollective.com/open-web-docs.
For more information on sponsorship and membership tiers, see https://openwebdocs.org/membership/

More information is available at https://openwebdocs.org/.
For questions, please reach out to [email protected].