Re: [csswg-drafts] [css-fonts] Multiple @font-face multiple src declarations (#7753)

> I guess browser implementations register font source definitions when parsing `src` therefore multiple declarations are already accepted and none is ignored.

No, as far as I am aware browsers keep only the last (valid) `src` descriptor they see. E.g. in Chrome:
```
> s = document.createElement("style"); document.body.appendChild(s);
> s.textContent = "@font-face { font-family: x; src: url(x.ttf); src: url(y.ttf); }";
> document.styleSheets[document.styleSheets.length-1].cssRules[0].cssText
< '@font-face { font-family: x; src: url("y.ttf"); }'  // only the second src descriptor is present

But:
> s.textContent = "@font-face { font-family: x; src: url(x.ttf); src: url(y.ttf) format(foo); }";
> document.styleSheets[document.styleSheets.length-1].cssRules[0].cssText
< '@font-face { font-family: x; src: url("x.ttf"); }'  // second src was invalid, so the first is retained
```

Regarding fallbacks:

> The author can already define multiple sources with comma-separated values:
> 
> ```css
> src: url("FallbackURLForBrowsersWhichDontSupportIncrementalLoading.woff2") format("woff2"),
>      url("MyIncrementallyLoadedWebFont.otf") format(opentype)  tech(incremental);
> ```

With this, any browser that accepts WOFF2 would use the first source, and so the incremental option would never be considered.

To have the intended effect, this should be the other way around:
```
src: url("MyIncrementallyLoadedWebFont.otf") format(opentype)  tech(incremental),
     url("FallbackURLForBrowsersWhichDontSupportIncrementalLoading.woff2") format("woff2");
```
This would be the "preferred" or modern way to express fallbacks. However, there are existing browsers that do not recognize the `tech()` function and will drop the entire `src` descriptor (not just that item from the list -- contrary to what the spec says). (They'll similarly drop the entire descriptor if any one item has some other kind of syntax error.)

Therefore, for maximum compatibility it's advisable to use multiple `src` descriptors, with the "modern" full descriptor last, but preceded by a simpler, backward-compatible fallback for browsers that will reject the modern version. So we end up with something like:
```
@font-face {
  font-family: MyFamily;
  src: url("FallbackURLForBrowsersWhichDiscardModernSrcDescriptors.ttf");
  src: url("MyIncrementallyLoadedWebFont.otf") format(opentype)  tech(incremental),
       url("FallbackURLForBrowsersWhichDontSupportIncrementalLoading.woff2") format("woff2");
}
```
Legacy browsers that reject the second `src` entirely will keep the first version of the descriptor; modern browsers will override the first `src` with the second, and use the first supported resource from its list.


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


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

Received on Thursday, 8 December 2022 14:51:26 UTC