Shopify themes, liquid, logos, and UX
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
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");
}
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.
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.
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!
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.
Desktop browser. Title correct.
iPhone browser (all types). Title text font not loading or showing correctly.
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");
}
In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024