- From: Xiaocheng Hu via GitHub <sysbot+gh@w3.org>
- Date: Wed, 03 Feb 2021 21:11:52 +0000
- To: public-css-archive@w3.org
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