Custom fonts not working on iOS or Safari, but working on Chrome and Firefox (Desktop) - DAWN 15.2

Store Design
, , ,

Topic summary

A user encountered an issue where custom fonts installed in a Shopify Dawn 15.2 theme worked on Chrome and Firefox desktop but failed on iOS devices and Safari desktop.

Problem Details:

  • Custom fonts were uploaded to the assets folder with @font-face rules in base-css
  • No apparent CSS conflicts detected
  • Fonts rendered correctly on Chrome/Firefox but not Safari/iOS

Solution Found:
After weeks of troubleshooting, the issue was resolved by:

  • Uploading font files (WOFF2, WOFF, TTF formats) to Content > Files instead of the assets folder
  • Using the full URLs from Files in @font-face declarations
  • This approach allows bulk uploading and appears more compatible across browsers/themes

The solution was credited to another community member (ricknoubal) and confirmed working by multiple users experiencing the same Safari/iOS font rendering problem.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

I am designing a Shopify store for a client using the Dawn theme (15.2). I’ve installed some custom fonts to the assets folder and applied fontface rules to the base-css file. I have also added some element-specific tweaks in the custom css areas in the theme editor, and in specific files. Nothing is conflicting that I can tell. But, as the title says, the fonts do not work on iOS (both iPad and iPhone), or on Safari desktop. They DO work on Chrome desktop and Firefox desktop. What am I doing wrong?

The site is: https://vcavc8-f8.myshopify.com/
Password: okus

2

Update - Solved!

After literal weeks of not being able to solve this issue and trying countless suggestions, I found the following that worked, from ricknoubal in another thread.

Some themes/browsers don’t seem to like fonts that have been uploaded to the assets folder. Instead, upload fonts in formats WOFF2, WOFF & TTF directly to Files (in Dawn theme, thats Content > Files. This is actually easier because you can bulk upload the font files instead of doing individually. Then copy the full URL for each file into the below CSS:

/* CUSTOM CSS */

@font-face {

font-family: ‘Your Custom Font’;

font-weight: 300;

font-style: normal;

font-display: swap;

src: url(‘YourCustomFontFileURL’) format(‘woff2’), url(‘YourCustomFontFileURL’) format(‘woff’); url(‘YourCustomFontFileURL’) format(‘ttf’);}

2 Likes
3

Finally someone gave me a right solution after dayyyys trying!! thank you!!