Github [css-fonts-5] @font-face supports incremental · Issue #6063 · w3c/csswg-d...

In the WebFonts WG, we're investigating technologies for incremental font loading, so that the browser doesn't need to download every last byte of a font before it can start using it. Our initial technical findings are promising.

We're specifying an approach where the browser downloads only the parts of the font it actually needs to render the current page (plus some extra for speculative data it might need in the future, plus some more extra for noise so the server doesn't know exactly the contents of the page you're on).

This kind of incremental loading strategy does have a behavior change, regarding the loading timeline. Today, if a font loads, then the page can assume that all the characters supported can be immediately styled with that font. However, with an incremental loading strategy, new content dynamically added to the page might cause a flash while the browser downloads the font data it needs to display that new content.

Because there's a behavior change, browsers can't just start doing this willy-nilly. Instead, there needs to be an opt-in mechanism. Luckily, we've already given @font-face exactly the kind of opt-in mechanism that would be required - the supports keyword inside the src descriptor.

So, we (the WebFonts WG) would like to add a new keyword to the font-technology production: incremental. Using it would look like this:

@font-face {
    font-family: "MyIncrementallyLoadedWebFont";
    src: url("MyIncrementallyLoadedWebFont.otf") format(opentype supports incremental);
}

Right now, this supports grammar is unimplemented in every browser (we think). The WebFonts WG is intentionally recommending to the CSSWG to use it here, as this incremental font loading technology would be a great opportunity to get it implemented in browsers. If an author wants to provide fallback behavior for browsers that don't support this grammar, they can achieve backwards-compatibility like this:

@font-face {
    font-family: "MyIncrementallyLoadedWebFont";
    src: url("FallbackURLForBrowsersWhichDontSupportIncrementalLoading.otf") format("opentype");
    src: url("MyIncrementallyLoadedWebFont.otf") format(opentype supports incremental);
}

(This issue is just about an opt-in mechanism for using the feature at all; additional issues regarding its interaction with font-display and the CSS Font Loading API are forthcoming.)