Custom font doesn't render on iPhone - all browsers. Fine on desktop.

[tmaciejewski]

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 --

https://dcwym1zjwvax50gu-8268827.shopifypreview.com

[webwondersco]

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

[tmaciejewski]

I am using both woff and woff2, they aren't loading on iPhone.

[webwondersco]

Okay great. how you have added fonts in your theme? by using any third party font links or using shopify font URL?

[tmaciejewski]

uploading the fonts as assets and then utilizing proper css to reference.

[Edgywebsites]

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/16884...

Good luck!

[tmaciejewski]

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.

[tmaciejewski]

Desktop browser. Title correct.

[tmaciejewski]

iPhone browser (all types). Title text font not loading or showing correctly.

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