Apply fonts even if site has CSP – or as a fallback, tell user when CSP fails to load font

[RoelN]

See https://github.com/arrowtype/type-x/issues/22#issuecomment-495509886 and https://github.com/arrowtype/type-x/pull/62#issuecomment-549304286

[RoelN]

Use something like https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet and inject a message into the page? Or pass back a flag to the extension and show a warning there and/or in the extension icon? (e.g. add ⚠️)

[arrowtype]

One thing that might be worth noting: it (currently) seems to work to reload GitHub when a font has been applied. Perhaps our message to the user could say something like, "Oops, this page doesn't allow automatic font changes. Try refreshing the page to make the font overrides work."

[arrowtype]

Of course, that may not be a permanent solution, so I'm not sure how much we should hedge what we tell the user. Maybe something like:

This page doesn't allow font injection. Reloading the page might help.

[arrowtype]

Somehow, https://getsnapfont.com/ is able to override fonts on GitHub and Twitter, which type-x currently can’t. I’m guessing we could figure out how this is possible, and perhaps make type-x that much more useful.

[RoelN]

This extension is using fonts served from Google Fonts. I first figured they must've whitelisted GF, but this doesn't seem the case.

Twitter's error when using Type-X is:

Refused to load the font 'data:application/octet-stream;base64,...' because it violates the following Content Security Policy directive: "font-src 'self' https://*.twimg.com".

Github's error when using Type-X is:

recursive-code-config:1 Refused to load the font 'data:application/octet-stream;base64,...' because it violates the following Content Security Policy directive: "font-src github.githubassets.com".

These are two different error messages.

The only difference I see is that our fonts are loaded as base64. I'd need to dig in deeper to find out why our base64 isn't allowed, but external Google Fonts is.

[arrowtype]

Sounds good, thanks for the initial investigation! Yeah, it may be that the use of Google Fonts somehow makes the other extension work ... this is a total guess and I’m probably wrong, but maybe the domain googleapis.com (as in @import url('https://fonts.googleapis.com/css2?family=Recursive'); is allowed, due to Google Analytics or some other product.

Or, maybe the other extension simply uses another approach. It would be worth looking into a little bit, probably. And then, as a fallback, it would be good to do what this issue originally suggested – provided a little error message when the extension can’t work, and ideally leaving such webpages with their original fonts (currently, if type-x fails, the webpages end up in Helvetica or whatever defaults appear in the type-x font stack, which is a little bit disruptive).