CORS issue for fonts

Support
1

I have imported my fonts like so in the CSS

src: url("../font/ProductSansBold.ttf") format("truetype");

Everything used to work well until yesterday, I noticed that the font isn’t loading.
There’s the error I get in the Javascript Console:

Access to font at 'https://d33wubrfki0l68.cloudfront.net/css/236c31733a10fcce6c5121e1abdb91d633e46d1a/font/ProductSansBold.ttf' from origin 'https://61552bc84f44ca0007ddc48d--gavinpereira.netlify.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

What am I doing wrong?

I have temporarily changed the CSS to download the font from absolute URL. However, I will still prefer to have a relative URL.

src: url("https://gavinpereira.in/font/ProductSansBold.ttf") format("truetype");

Link with temporary fix: https://gavinpereira.in
Link with the font issue: https://61552bc84f44ca0007ddc48d--gavinpereira.netlify.app/

2

Hi @pexeixv,

You can disable asset optimisation from your website’s settings to fix this problem.

3

I’m aware that disabling asset optimization will fix the issue. But I want to know why it is giving CORS error suddenly. This used to not happen before. Has Cloudflare changed something which stops us from accessing content from its CDN?

4

This generally happens when the asset optimisation tries to process a file that doesn’t exist or has some other problem. It changes the URL in the actual code, but the file never gets sent to Cloudfront, and thus the issue.

I can’t say if that’s the problem in your case too, but a general idea of what happens.