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

Store Design
, ,

Topic summary

A custom Shopify font rendered correctly on desktop but failed on iPhone browsers. The font was uploaded as a theme asset and referenced via CSS.

  • Initial guidance: Add a code snippet in theme.liquid above the tag. This made the RadCliffeBold font render on iPhone, but not the desired KasseUltraFLF, which continued to work only on desktop.

  • Resolution: Convert the KasseUltraFLF font and provide multiple web-safe formats, then define them via CSS @font-face. Uploading and referencing eot, svg, and ttf (alongside otf) fixed mobile rendering. The user shared a working @font-face block listing these sources.

  • Technical note: @font-face is a CSS rule to load custom fonts. Different browsers (including iOS Safari) may require specific font formats, so supplying multiple formats ensures compatibility.

  • Assets provided: A Shopify preview link and screenshots illustrating correct desktop rendering and initial iPhone failure.

Status: Resolved. The font now renders properly on iPhone after adding additional font formats and updating @font-face.

Summarized with AI on December 19. AI used: gpt-5.
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”);
}