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

[tmaciejewski]

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

Desktop renders fine.

iPhone does not render properly.

Thanks!

[Moeed]

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 </body> tag

<style>
#shopify-section-template--16518152093749__animated_text_HCVHFB .content-wrapper--text_dynamic * {
    font-family: 'RadCliffeBold' !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[tmaciejewski]

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?

[tmaciejewski · Accepted solution]

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");
}