Why is my custom font not displaying on mobile devices?

Store Design
, ,

Topic summary

A user is experiencing issues with a custom font (SergioTrendy-Regular) not displaying properly on mobile devices.

The provided CSS code shows:

  • A @font-face declaration loading a .woff2 font file from Shopify’s CDN
  • A media query targeting screens with max-width of 767px (mobile devices)
  • The font-family applied to the body element

The code snippet appears corrupted or reversed in places, which may indicate:

  • Copy-paste errors in the CSS
  • Potential encoding or character issues
  • Possible syntax problems preventing the font from loading

No solutions have been offered yet. The issue likely requires debugging the CSS syntax, verifying the font file URL is accessible, and ensuring proper font format support for mobile browsers. The discussion remains open with the user seeking assistance.

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

Is there anything anyone can do? Thanks so much

{%- endif -%} @font-face { font-family: 'SergioTrendy-Regular'; src: url('[https://cdn.shopify.com/s/files/1/0612/7756/9224/files/Sergio_Trendy.woff2?v=1700283535](https://cdn.shopify.com/s/files/1/0612/7756/9224/files/Sergio_Trendy.woff2?v=1700283535)') format('woff2'); }@media only screen and (max-width: 767px) { body { font-family: 'SergioTrendy-Regular', sans-serif; } }