[csswg-drafts] [css-fonts-4] font-display: optional without relayout (#4108)

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

== [css-fonts-4] font-display: optional without relayout ==
https://drafts.csswg.org/css-fonts-4/#font-display-desc

I originally thought `font-display: optional` was designed to provide web fonts in a way that avoided swapping or flash-of-invisible-text, at the expense of getting a fallback font for the first visit. This is kinda backed up by a note in the spec:

> the font is used if it’s already downloaded and available, but otherwise a fallback is used for the rest of the page’s lifetime instead. The font might download in the background and be available to future page loads

However, the prose doesn't really define the behaviour.

https://static-misc.glitch.me/optional-font-load/

In Chrome & Firefox at least, the page may briefly render with invisible text (using layout from a fallback font), causing the green bar to move when the page is laid out again using the web font. This is the kind of layout instability I thought `font-display: optional` was designed to avoid.

**Proposal:**

When the browser discovers a part of the page that needs a `font-display: optional` web font, it must:

1. Block rendering.
1. Makes an [`"only-if-cached"`](https://fetch.spec.whatwg.org/#concept-request-cache-mode) fetch for the resource.
1. Let *font* be null.
1. If there's a valid font response that isn't stale, set *font* to that resource.
1. Otherwise, set *font* to the result of getting the next item in the `font-family` stack.
1. Unblock rendering.
1. If there was no response, or the response was stale, make a low-priority request for the font resource (just to populate the cache for next time).

We already block rendering when getting regular font resources from disk, so blocking rendering shouldn't really be a problem here, unless we expect the above to be significantly slower than loading installed fonts.

Do you think we can safely change `font-display: optional` to behave similar to above? If not, do we need a new value that behaves like this?

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

Received on Friday, 12 July 2019 07:40:38 UTC