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:
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.