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 6 (6)

made4Uo
Shopify Partner
3818 715 1135

Hi @dmogil,

 

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

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
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.