[csswg-drafts] [css-fonts] More intuitive version of preload + font-display optional (#5924)

xiaochengh has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-fonts] More intuitive version of preload + font-display optional ==
When a web author doesn't want to pay any CLS for web fonts, but still want the font to be used with a big enough chance, there's a trick of combining ([example](https://www.industrialempathy.com/posts/high-performance-web-font-loading/#using-preload-with-font-display%3A-optional) [example](https://web.dev/preload-optional-fonts/)):
- A preload of the font file (`<link rel=preload>`)
- Setting the `font-display` descriptor value to `optional`

It makes the web font acts similar to a local font that:
- If the font loads fast enough, then we never use fallback fonts, which is similar to a successful load of a local font
- If the font loads slow to fails, then we end up using fallback, which is similar to a failed load of a local font

However, the trick is pretty unintuitive. Preload indicates that the font is important, yet `font-display: optional` means the font is not so important. It can be very confusing ([example](https://twitter.com/boostmarks/status/1355822258242117641)).

So I'm filing this issue to investigate a more intuitive version.

---

Idea: A new `font-display` value that does the same? As soon as we see it in a stylesheet, we kick off a preload of the font, and block rendering before the preload finishes or a timeout (e.g., 50ms); And the font enters the `failure` font display period as long as any fallback has been used.

Also note that in Chrome, we've already implemented this behavior when preloading and `font-display: optional` are used together.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5924 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 3 February 2021 21:11:53 UTC