A custom font (“KasseUltraFLF”) displays correctly on desktop browsers but fails to render on iPhones across all browsers, defaulting to a standard font instead.
Initial troubleshooting attempts:
Resolution:
The issue was solved by converting the font file through a free online converter and adding multiple additional formats beyond woff/woff2:
After implementing a comprehensive @font-face declaration with all five formats (eot, woff, woff2, ttf, svg), the font now loads properly on mobile devices. The user shared the complete CSS code for future reference.
The “Da Kine Hawaiian” text in the hero area renders with the custom font “KasseUltraFLF” renders fine on desktop. The custom font does not render on iPhone using any browser. It appears to render a default font.
How do I get the custom font to show on the site when using an iPhone?
Site preview URL –
you can convert your font file to woff and woff2 and use that font file in your website. This will definitely work in all iphon browser
I am using both woff and woff2, they aren’t loading on iPhone.
It’s not loading on desktop either. It probably ‘looks’ loaded for you as you may have that font installed on your computer locally. Try this solution I posted a while ago:
https://community.shopify.com/c/shopify-design/why-isn-t-my-font-face-displaying-correctly/m-p/1688496#M451292
Good luck!
It is loading on desktop. It is viewable by a variety of clients dispersed around the west coast. They don’t have the font installed on their computer. They can all see the proper font on a desktop browser, but not on iPhone.
Okay great. how you have added fonts in your theme? by using any third party font links or using shopify font URL?
uploading the fonts as assets and then utilizing proper css to reference.
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”);
}
