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

I think this captures almost all of it (doesn't seem to capture cached fonts that happened to not have a preload meta tag?).

How about this:

Let's call a font `cached-locally` if no network request (Service Worker not allowed either) need be done to get the resource.

Let's call a font `short-render-blocking` if it is referenced by a [preload](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content) tag in the HTML document, *or* is `cached-locally`.

If, while parsing an HTML document, we encounter a reference to a `short-render-blocking` font, then the User Agent *should* delay subsequent [rendering](https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering) for a short period (< 100ms) in order to give that font time to load. If a font is `cached-locally`, the User Agent *should* move the font into memory as soon as it is discovered in the stylesheet.

That's it. If a developer wants their font to have the highest likelihood of displaying on cold and warm loads, and never have double renders due to that font, they should put something like this in their HTML:

HTML:
```
<-- This causes the font network fetch to start as soon as possible, supports caching
in the local HTTP cache or service worker, and causes the font to be
short-render-blocking -->
<link rel="preload" href="my-font.woff" as="font">

...

<link rel="stylesheet" href="my-stylesheet.css">

...

Content that depends on my-stylesheet.css
```

my-stylesheet.css:
```
@font-face {
  font-family: ExampleFont;
  src: url(my-font.woff) format('woff'),
 
  # This causes the font to never cause double rendering
  font-display: optional;
}
```

Perhaps this should also apply to *all* web fonts. `font-display: optional` is perhaps special only in that we should never render twice due to it, regardless of whether it was available in memory for the first render.

-- 
GitHub Notification of comment by chrishtr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4108#issuecomment-574428369 using your GitHub account

Received on Tuesday, 14 January 2020 23:49:02 UTC