Why does my uploaded custom font not display correctly on Shopify?

I want to use a custom font which I uploaded into my assets folder. I imported the font in my theme.liquid inside a {% style %}.

Everything works fine so far and I can see in the preview that the font is loaded onto my elements (screenshot 3) which I assigned in my base.css (dawn theme).

But: No matter which custom font I upload and assign, it always looks the same and has nothing to do with the font (screenshot 1). I also uploaded it onto my website without shopify to test if maybe the font file was converted incorrectly (ttf > woff2) but there it is displayed fine.

It seems like shopify converts my uploaded file into a default font. What do I have to do?

Thanks for any help!

Hello there, could you share your store url? I can have a look how it behaves on my end.

Thanks @MichalKopec for your reply, I sent you a url by DM.

@MichalKopec thanks for your help, the problem was solved by uploading the font via the files option in the page settings and then reference the font with the url instead of the assets link.

The font was always corrupted when uploading into the assets folder.

2 Likes