What's your biggest current challenge? Have your say in Community Polls along the right column.

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

Solved

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

tmaciejewski
Excursionist
21 2 0

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

Accepted Solution (1)

tmaciejewski
Excursionist
21 2 0

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

View solution in original post

Replies 9 (9)

webwondersco
Shopify Partner
1176 169 172

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

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
tmaciejewski
Excursionist
21 2 0

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

 

webwondersco
Shopify Partner
1176 169 172

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

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
tmaciejewski
Excursionist
21 2 0

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

Edgywebsites
Shopify Partner
30 2 36

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!

If our response solved your query, please like and accept it as the solution.

Edgy Websites · All things Shopify
Contact us for Expert Shopify Support
tmaciejewski
Excursionist
21 2 0

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
Excursionist
21 2 0

tmaciejewski_0-1726430784688.png

Desktop browser. Title correct.

tmaciejewski
Excursionist
21 2 0
 
 

tmaciejewski_3-1726430847620.png

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

 

tmaciejewski
Excursionist
21 2 0

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