Locally hosted fonts breaking CSP rule

Question

I'm setting up Content-Security-Policy headers in Nginx and I am stuck at getting the locally hosted Typekit fonts to work.

I'm using the following script for hosting Typekit fonts locally and the result has been very good with good load times and no FOUT: https://github.com/morris/typekit-cache

But now the problem is setting up CSP to pass these fonts. I tried localStorage but it didn't work.

These are the errors I'm getting:

[Report Only] Refused to load the font 'data:font/opentype;base64,d09GMgABAAAAAFb0ABQAAAAAskgAAFaDAAIAAAAAAAAAAAAAA…bJbjfY7U6T320POPp5HLprLxRlPwIJqShhBB1pRCUKkQmIKRpGoiON1kre7lGR0Z4h5ENMAQAA' because it violates the following Content Security Policy directive: "font-src 'self'

[Report Only] Refused to load the font 'data:application/font-woff;base64,d09GRgABAAAAABwUAA4AAAAAKHQAAQAAAAAAAAAAA…NfJJTVolXlnco7lXdLiWW32CnmmMrFlnJ5aXLN8srxynGxmBgfv9d+AQ8KdggAAAABVwJMPAAA' because it violates the following Content Security Policy directive: "font-src 'self'

(I removed the domains listed for the font-src policies).

Thank you

Answer 1

You can see its creating the font-src as data when it loads them in. That is base64 encoded versions of the font rather than links to the fonts themselves.

So just change font-src 'self'; to font-src 'self' data: ; and it should work fine.