How can I fix a parsing error with custom fonts on Shopify?

[dmogil]

So, we have a woff custom font file. And it works fine on my local. But when I load it to Assets folder and embed it using font-face, the font can't be decoded, I'm getting the error: "OTS parsing error: incorrect file size in WOFF header" (woff2 font has the same problem). 

I'm following the link to the font given by asset_url filter, downloading the font file from there, and trying to use it on my local. And - it shows me the same error! More than that - the file from Shopify is 42kb, while the original file is 23kb!

So the question is - does Shopify corrupt fonts? And how to fix this?

[made4Uo]

Hi @dmogil,

Try the instructions below but if this does not work, you can try the other solution I included in my website

[dmogil]

Thanks, but it is not about my actual problem - font files been corrupted

[aoskie]

I am having the same issue on my friends site. This video doesn't solve the issue. does anyone else have a solve for fixing the corrupted fonts issue?

[Hugtrash]

Ran into the same Issue... seems to be a very ugly bug in shopify.

As soon as you upload webfonts in woff or woff2 (awfully no other formats like .otf is supported when uploading it into the assets folder of your theme) the file gets corrupted. We got a workaround, just upload into the files section within your shop settings, then use the file_url instead of the asset_url. This workaround worked for us.

[mikedoohans]

nice, this solved my problem.

the woff2 / woff files need to file upload, then load them into theme.liquid

<link rel="preload" href="fileurl.woff2" as="font" type="font/woff2" crossorigin="anonymous">

refer from this article point no.5

https://sections.design/blogs/shopify/preloading-fonts

[FunkDoc]

This worked for me as well. Thank you.

[Airofoil]

Thanks for that, uploading to Files and | file_url }} still works!