Custom Font Coding only viewable on certain devices?

Store Design
, , , ,

Topic summary

A user is experiencing inconsistent custom font display across devices. The custom font (Enjoy_forest) appears correctly on iPhone and iPad but fails to load on Android phones and desktop Mac computers, reverting to the theme’s default ‘mono’ font instead.

Technical details:

  • Font file uploaded in .woff2 format
  • Custom CSS includes @font-face declaration with Shopify CDN URL
  • Applied to heading elements (h1-h5) with !important flag

Code issue:
The provided CSS code appears corrupted or reversed in the post, making it difficult to verify proper syntax. The font-face declaration and URL structure seem incomplete or improperly formatted.

Current status:
User was referred from Shopify help advisor to the forum for assistance. The issue remains unresolved, requiring troubleshooting of the CSS implementation and potentially checking browser compatibility or font file format support across different platforms.

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

I was referred here by shoplify help advisor.
Here is the previous conversation from that chat.

  • why does my custom font only work on my website when you open my website on an iphone or ipad(both apple).
  • If you open my website on an android phone or on my desk top mac(apple) it does not show my custom font. Instead it show’s the theme’s original font(currently ‘mono’).
  • I have coded this custom font file into my base.css correctly from what I can tell.

Thank you for your help!

I also have my file uploaded in woff2.
My coding:

}
@font-face { font-family: Enjoy_forest; src: url(‘https://cdn.shopify.com/s/files/1/0901/0095/7482/files/Enjoy_forest.woff2?v=1733986881’); }
h1, h2, h3, h4, h5 {
font-family: Enjoy_forest !important;
}

2

I also have my file uploaded in woff2.
My coding:

}
@font-face { font-family: Enjoy_forest; src: url(‘https://cdn.shopify.com/s/files/1/0901/0095/7482/files/Enjoy_forest.woff2?v=1733986881’); }
h1, h2, h3, h4, h5 {
font-family: Enjoy_forest !important;
}