Two custom fonts load in any desktop browser, but only one font loads on iPhone in any browser. Why?

[tmaciejewski]

I call two custom fonts on my webpage -- KasseUltraFLF and RadcliffeBold.



The code for calling both is identical. Both fonts load in any desktop browser. Only RadcliffeBold loads on iPhone in any browser.



The code is identical, the font formats are identical (WOFF), and they both load on desktop browsers, so I know the code is implemented properly.



The code that loads on both desktop and iPhone (RadcliffeBold) -- if I apply that as the fallback font for the text where I want KasseUltraFLF to be applied, the RadcliffeBold font will load on iPhone.



Again, the code for both fonts is identical, and both fonts load on desktop browsers.



Why doesn't KasseUltraFLF load on any browser on an iPhone?



Sample site:

Da kine Hawaiian Specialty Gourmet Condiments





Here is the code for reference --



@font-face {

font-family: "KasseUltraFLF";

src: url("/KasseUltraFLF.woff") format("woff");

font-style: normal;

}

@font-face {

font-family: "RadcliffeBold";

src: url("/RadcliffeBold.woff") format("woff");

font-style: normal;

}



<style>
#shopify-section-template--16518152093749__animated_text_HCVHFB .content-wrapper--text_dynamic * {
font-family: 'KasseUltraFLF', 'RadcliffeBold' !important;
}
</style>

 

[tmaciejewski]

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