Problem fetching CSS rules from Netlify CDN for a specific fetch request

Support
,
1

Hi! My site is adoring-bohr-b8e148.

Our site is built in React, with create-react-app. As one of our functionalities, we allow the user to download one of our pages as a PDF Report. This works fine for the most part in local environments, but for some reason in production the PDF report loses our custom font and reverts to the user’s default for the browser.

Looking into it, in development in a local environment the browser makes a request for the fonts and gets them no problem. But in production it instead gets the following error:

Error while reading CSS rules from https://d33wubrfki0l68.cloudfront.net/css/b4c73610f94e988ed1b078e8650464c84eecdab0/static/css/main.57913e57.chunk.css SecurityError: Failed to read the ‘cssRules’ property from ‘CSSStyleSheet’: Cannot access rules

Then it proceeds to create the PDF file with everything correct except the fonts. Here’s a comparison of the Network traces in both environments as produced right after clicking the button that initiates the PDF creation:

Left Production with no fonts loaded, right Development, with the fonts correctly loaded in:

image
image3839×1475 1.17 MB

From my research online, it seems this may be due to CORS settings, but since whats serving the file that throws the error is the CDN then I cannot directly control CORS.

Also possibly relevant, the CSS is all done through MaterialUI + its makeStyles API.

Please help!

2

Before trying to troubleshoot this further, would it not be possible and easier to embed fonts in the PDF file itself, so no need of CSS whatsoever?

3

Sadly no. Due to our particular needs (several pages, very customized look, variable length of report) and the fact that turning React into a PDF is much harder than it ought to be, the PDF is being generated through dom-to-pdf which turns a given Component into an image or several images and then puts those images in the PDF. So embedding the fonts won’t fix the problem since the text is not actually text in the PDF and just part of an image.

Other solutions which would allow this like using @react-pdf/renderer don’t allow us to keep our custom report look, and a direct jspdf use won’t easily work with multiple pages or variable report length.

4

Maybe it’s a problem due to Asset Optimization then. Have you checked if turning that off helps?