Custom font renders fine on desktop browsers, but NOT on iPhone. How to fix?

Store Design
, ,
1

I have a custom font that I’ve uploaded in Shopify as an asset, and referenced via CSS.

The font renders fine on all desktop browsers (see screenshot).

The font does NOT render on an browsers on an iPhone.

Why? How do I fix it so the font will also render on an iPhone.

Site preview link here –

https://9axm8okvrdm7lmi8-8268827.shopifypreview.com

tmaciejewski_0-1726591375926.png
tmaciejewski_0-1726591375926.png400×302 170 KB

Desktop renders fine.

tmaciejewski_1-1726591395056.png
tmaciejewski_1-1726591395056.png267×399 136 KB

iPhone does not render properly.

Thanks!

2

Hey @tmaciejewski

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1726591904950.png
Moeed_0-1726591904950.png370×572 241 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Thank you.

It’s interesting –

That works to render the RadCliffeBold font on iPhone, but the same snippet of code won’t render the KasseUltraFLF (which is the font I want). KasseUltraFLF renders fine on desktop, but not on iPhone.

I use the code above, but replace RadCliffeBold with KasseUltraFLF, and KasseUltraFLF doesn’t render on iPhone. KasseUltraFLF will still render on desktop.

Any thoughts?

4

Someone solved my answer in another thread. The solution was to run the font file through a free online convertor, and upload additional formats (eot, svg, and ttf). The font loads properly now on mobile.

For anyone looking for this solution in the future, here is the CSS I used –

@font-face {
font-family: “KasseUltraFLF”;
src: url(./KasseUltraFLF.eot);
src: url(./KasseUltraFLF.eot?#iefix) format(“embedded-opentype”),
url(./KasseUltraFLF.otf) format(“otf”),
url(./KasseUltraFLF.svg#KasseUltraFLF) format(“svg”),
url(./KasseUltraFLF.ttf) format(“truetype”);
}