Re: [csswg-drafts] [css-fonts] Add a `font-display` keyword to eliminate `@font-face` FOIT & layout shifts (#7271)

> The polyfill can be improved if we also preload the font in the main document, in which case it will be as fast as my proposal. However, this isn't possible if the font URL is managed by a 3rd party provider, which is a major use case I'd like to support.

By this I guess you mean that the font URL is not knowable by the page, only the style sheet URL is? And because the style sheet can't be fetched (absent CORS headers), its text can't be inserted into the document dynamically (or the font URLs extracted from inside it).

But I think the polyfill can still make it work, since it can watch for the load event of the third party style sheet:

```html
<script>
function reveal() { document.documentElement.style.display = ""; }
document.documentElement.style.display = "none";
setTimeout(reveal, 500);
</script>
<link href="https://fonts.googleapis.com/css2?family=Smooch" rel="stylesheet" onload="document.fonts.load('20px Smooch').then(reveal);">
<style>body { font: 100px Smooch; }</style>
<p>Here is my text.</p>
```

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


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

Received on Tuesday, 28 June 2022 07:05:51 UTC