Response Transform Rule Preventing Font Rendering

[andrew.simpson]

First time poster - I’ve encountered a really weird behaviour that I think might be a bug.

If I have an HTTP response transform rule (for content-security-policy) enabled my self-hosted fonts are loading, but not rendering. Even innocuous transformations that shouldn’t impact fonts.

Scenario 1

1. Single transform rule with the following config: Set static — Content-Security-Policy — frame-ancestors ‘none’;
2. Purge Everything in the Cache Config page
3. ctrl+f5 to reload my site’s home page on any browser
4. In dev tools > Networks, check that the content-security-policy is included in the home page response (can take a minute or so - if not, rerun ctrl+f5 on previous step)
5. Observe font
   RESULT: The custom fonts load and render correctly

Scenario 2

1. Single transform rule with the following config: Set static — Content-Security-Policy — frame-ancestors ‘none’; default-src ‘self’; <<i.e. one extra value added on compared to previous
2. As before, urge Everything in the Cache Config page
3. As before ctrl+f5 to reload my site’s home page on any browser
4. As before in dev tools > Networks, check that the content-security-policy is included in the home page response (can take a minute or so - if not, rerun ctrl+f5 on previous step)
5. Observe font
   EXPECTED RESULT: The custom fonts load and render correctly
   ACTUAL RESULT: The fonts load (I can see they have successfully loaded in Sources) but they don’t render.

This screenshot is Edge. I can see the fonts have loaded successfully from Self. I can also see that a base64 image has been blocked by CSP - which is expected as I haven’t enabled data: for img-src. So the font isn’t being blocked from loading by the CSP (it’s black, not red), but something is stopping the custom font rendering.

My fonts are definitely self hosted!

[simon]

What do you see in the browser console while replicating? If the Network tab is showing HTTP 200s with the “response” body you expect for those font files, the clue is likely in there and this is more likely to be browser (mis)behaviour based on the CSP you have set, rather than an issue with Transform Rules itself.

[andrew.simpson]

Apologies for the delay, and thanks for the response.

It was spot on - when I checked the console it was telling me explicitly what directives I was missing.

Thank you for your help!