Support Forums

CORS issue for fonts

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/

Hi @pexeixv,

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

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?

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.