Prefer WOFF2 in @font-face examples #42960
Conversation
badwriter123
requested review from
chrisdavidmills and
wbamberg
and removed request for
a team
github-actions
bot
added
Content:CSS
|
Preview URLs (3 pages)
Flaws (1) Note! 2 documents with no flaws that don't need to be listed. 🎉 Found an unexpected or unresolvable flaw? Please report it here. URL:
(comment last updated: 2026-01-29 12:09:49) |
chrisdavidmills
left a comment
chrisdavidmills
left a comment
There was a problem hiding this comment.
These changes look mostly good to me; thanks @badwriter123.
I'm guessing that there are a lot of other instances that need to be updated around the site. Are you intending to do these gradually across a set of multiple PRs?
| @@ -59,6 +59,8 @@ If the `local()` function is provided, specifying a font name to look for on the | |||
| Browsers attempt to load resources in their list declaration order, so usually `local()` should be written before `url()`. Both functions are optional, so a rule block containing only one or more `local()` without `url()` is possible. | |||
There was a problem hiding this comment.
The very first CSS block on this page uses .otf and .woff. Shouldn't this be updated too?
| Browsers attempt to load resources in their list declaration order, so usually `local()` should be written before `url()`. Both functions are optional, so a rule block containing only one or more `local()` without `url()` is possible. | ||
| If more specific fonts with `format()` or `tech()` values are desired, these should be listed _before_ versions that don't have these values, as the less specific variant would otherwise be tried and used first. | ||
|
|
||
| For web delivery, it's generally best to serve fonts in WOFF2 format. |
There was a problem hiding this comment.
It'd be good to expand this to explain why. Nothing too in-depth; just a couple of sentences?
|
Hello @chrisdavidmills , I have updated the changes as requested. In the first CSS Block, .otf line remains to illustrate opentype features, while the last line is the web-optimized font, so we only update the old .woff to .woff2. Also , I have explained why WOFF2 font is better to use than opentype. Thank you 😊 |
chrisdavidmills
left a comment
chrisdavidmills
left a comment
There was a problem hiding this comment.
The latest changes look great to me, thanks again @badwriter123!
Merging.
2 participants
Hello — addressing issue #42936
This updates @font-face documentation examples to prefer WOFF2 over raw TTF. The main @font-face reference page contained .ttf in examples, and the CSSFontFaceRule and CSSFontFaceRule.style pages duplicates the same snippet, so they were updated so to keep the documentation consistent across MDN.
Thanks 😊.