Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
This is an 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");
}
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
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?
This is an 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");
}
Discover how to increase customer engagement on your store with articles from Shopify A...
By Jacqui Apr 23, 2025Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025