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");
}
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024