[BUG] The polyfill causes @font-face rules to be ignored

[christophermh44]

Describe the bug
When @font-face rules are in CSS sources that are parsed by the polyfill, it seems like the navigator does not load them again after the CSS have been re-injected in the blob source. Please not that the bug is present only with self-hosted fonts.

To Reproduce
Example to reproduce here: https://projects.c-mh.fr/anchor-polyfill-font-bug/

Expected behavior
The loaded fonts needs to be still displayed.

Browsers tested on
Chrome (by forcing polyfill execution) and Firefox.

Possible workaround
For now, I have declared my fonts in a separate CSS file that won't be parsed by the polyfill, but in my case, it's not an ideal solution.

[jamesnw]

Thanks for the reproduction!

A quick diff shows that the polyfilled stylesheet is removing a crucial space-

src: url(Poppins-Medium.otf) format("opentype") becomes:
src: url(Poppins-Medium.otf)format("opentype")

We'll need to take a look to see why that's happening.

[christophermh44]

Thank you :)
I saw that it removed the space character, but if I copy the code with the space removed in the browser debugger, it works again, so I don't know if it's the real problem.

[jamesnw]

Hmm, in that case, my current guess is that there is an issue with loading self-hosted fonts from blob: css files.

Before the polyfill runs, accessing document.fonts shows the regular weight has loaded successfully. After the polyfill runs, I'm seeing this-

I'm not finding anything about loading fonts from blobs, but it seems possible that this would be blocked from a security standpoint.

If it's not that, it could be related to this section of the spec- https://drafts.csswg.org/css-font-loading/#font-face-css-connection.

[jgerigmeyer]

I'm pretty sure what's going on here is that relative URLs don't work when used in a blob source. (See: https://stackoverflow.com/questions/37657103/load-local-webfonts-from-blob-loaded-stylesheet)

I don't know if there's a good way for the polyfill to replace relative URLs with absolute URLs? Or if we should look into a non-blob way to inject the polyfilled styles.

[christophermh44]

Interesting point! I guess it makes sense for the browser to consider that inside a blob file, there is not really a context on which it can rely to compute targeted URLs from relative URLs.

Is there any reason for the polyfill to use blob instead of a <style> element? The result might not be the same?