Access to external fonts cause CORS error

[Yu727]

I have added one external style in the liquid file.

<link rel="stylesheet" href="https://site.com/style.css" type="text/css">

In https://site.com/style.css,

@font-face{font-family:HelveticaNeueLTStd_Cn;src:url(HelveticaNeueLTStd_Cn.woff)format("woff");}

But I am having this issue.

Access to Font at ‘https://site.com/HelveticaNeueLTStd_BdCn.woff’ from origin ‘https://fashion.myshopify.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Any ideas?

[rheav]

Good luck dude. Have one of this CORS problems myself for two weeks now. Shopify Chat says they dont have to know tech stuff so direct here, to the forum.

Search for any CORS related stuff, they either ignore or give blazé answers.

[PresetLion]

any solution for this?

Having the same issue!

[helmet_id]

After pulling my hair out trying to solve this in a bunch of different ways this is the formatting that correctly loaded a woff2 font for me.

@font-face {
    font-family: "name-of-font";
    src: url({{ "name-of-font.woff2" | asset_url }}) format("woff2");
}

Note that if I tried to also include the links to the “woff” and “eot” versions of the fonts in the same statement then it would break and the default fonts would display.

[DabsDesign]

I strongly recommend read this article:

https://shopify.dev/docs/themes/architecture/settings/fonts

below is an image with part of the text that explains how to apply the fonts in different situations.