Use WOFF2 examples in @font-face docs

[s4daexe]

Summary

Updates the @font-face examples to use WOFF2 font files instead of OTF files, following modern web font best practices.

Fixes #42936

[github-actions]

Preview URLs (2 pages)

• /en-US/docs/Web/CSS/Reference/At-rules/@font-face/src
• /en-US/docs/Web/CSS/Reference/At-rules/@font-face

Flaws (4)

Found an unexpected or unresolvable flaw? Please report it here.

URL: /en-US/docs/Web/CSS/Reference/At-rules/@font-face
Title: @font-face CSS at-rule
Flaw count: 1

• macros:
  • Macro csssyntax produces link /en-US/docs/Web/CSS/Reference/Values/declaration-list which doesn't resolve

---

URL: /en-US/docs/Web/CSS/Reference/At-rules/@font-face/src
Title: src CSS at-rule descriptor
Flaw count: 3

• macros:
  • Macro cssinfo produces link /en-US/docs/Web/CSS/@font-face which is a redirect
  • Macro csssyntax produces link /en-US/docs/Web/CSS/Reference/Values/font-src-list which doesn't resolve
  • Macro csssyntaxraw produces link /en-US/docs/Web/CSS/Reference/Values/url which doesn't resolve

(comment last updated: 2026-05-27 11:04:49)

[chrisdavidmills]

Hi there, @s4daexe, and thanks for your work on this. This is going in the right direction, but there is still more work to do here:

1. In the example you have edited, your edits mean that the second line starting with url(...) is now the same as the third. You should just delete the second one of these.
2. More seriously, this issue is not just present on the one page you have edited. It is present on all the child descriptor pages, too. It would be good for you to fix the problem there, too.

[github-actions]

[mdn-linter] _{reported by reviewdog 🐶}

Suggested change

	src:
	url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental),
	url("MgOpenModernaBold.otf") format(opentype);
	url("MgOpenModernaBoldIncr.woff2") format("woff2")
	url("MgOpenModernaBold.woff2") format("woff2")
	src: url("MgOpenModernaBoldIncr.woff2") format("woff2")
	url("MgOpenModernaBold.woff2") format("woff2");

[chrisdavidmills]

Several other child pages also need fixes: see the list at https://pr44262.review.mdn.allizom.net/en-US/docs/Web/CSS/Reference/At-rules/@font-face#descriptors.