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 KassUltraFLF load on any browser on an iPhone?

Sample site:

https://ms669qcbavv0tgak-8268827.shopifypreview.com/

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]

That was the trick. I ran the font file through a free online convertor, and uploaded 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");
}

[tmaciejewski]

Thank you so much!