Re: Problem with custom fonts

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

dmogil
Shopify Partner
10 0 2

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?


Replies 7 (7)

made4Uo
Shopify Partner
3840 716 1177

Hi @dmogil,

 

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

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
dmogil
Shopify Partner
10 0 2

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

aoskie
Visitor
1 0 0

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
Shopify Partner
3 0 3

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
Shopify Partner
2 0 0

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
Tourist
3 0 0

This worked for me as well. Thank you.

Airofoil
Shopify Partner
5 0 0

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