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

Store Design
, , , ,

Topic summary

A custom font (“KasseUltraFLF”) displays correctly on desktop browsers but fails to render on iPhones across all browsers, defaulting to a standard font instead.

Initial troubleshooting attempts:

  • The user was already using woff and woff2 font formats
  • One responder suggested the desktop rendering might be due to the font being locally installed, but multiple clients confirmed proper desktop display
  • The fonts were uploaded as theme assets with proper CSS references

Resolution:
The issue was solved by converting the font file through a free online converter and adding multiple additional formats beyond woff/woff2:

  • EOT (Embedded OpenType)
  • SVG
  • TTF (TrueType)

After implementing a comprehensive @font-face declaration with all five formats (eot, woff, woff2, ttf, svg), the font now loads properly on mobile devices. The user shared the complete CSS code for future reference.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
10

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