Issue with Rendering fonts on mobile devices

Store Design
, ,

Topic summary

A user is experiencing font rendering issues on mobile devices despite the fonts displaying correctly in Shopify’s mobile UI preview. The custom fonts (OptimaLTPro-Roman, FaveCasual-ScriptBoldPro, and others) are loaded via @font-face declarations with multiple formats (WOFF2, WOFF, TTF).

Code Issues Identified:

  • The provided CSS code appears corrupted or reversed in several sections, particularly for the h1, h2, h5, p, and h6 font declarations
  • Some font-family declarations are incomplete or malformed

Troubleshooting Steps Recommended:

  • Use browser developer tools to check for font-loading errors
  • Verify all CDN URLs are accessible and correct
  • Ensure font-family names match exactly between @font-face and element selectors (case-sensitive)
  • Test across different devices and browsers to isolate the issue
  • Check for CORS (Cross-Origin Resource Sharing) issues if fonts are hosted on different domains
  • Consider using preload directives to optimize font loading
  • Try removing CSS rules or testing individual fonts to pinpoint the problem
  • Contact Shopify support if issues persist

Status: The discussion remains open with no resolution yet confirmed.

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

I am having issues using the following code to render the fonts on mobile devices. When I look at the fonts through the mobile UI in shopify it renders correctly. But when I go to the website it does not show.

@font-face {
    font-family: 'OptimaLTPro-Roman';
    src: url('https://cdn.shopify.com/s/files/1/0798/1013/4319/files/OptimaLTPro-Roman.woff2?v=1703767192') format('woff2'),
         url('https://cdn.shopify.com/s/files/1/0798/1013/4319/files/OptimaLTPro-Roman.woff?v=1703767192') format('woff'),
         url('https://cdn.shopify.com/s/files/1/0798/1013/4319/files/OptimaLTPro-Roman.ttf?v=1703767192') format('truetype');
}
  
  h3, h4 {
    font-family: 'OptimaLTPro-Roman' !important;
}

@font-face {
    font-family: 'FaveCasual-ScriptBoldPro';
    src: url('https://cdn.shopify.com/s/files/1/0798/1013/4319/files/FaveCasual-ScriptBoldPro.woff?v=1703517867') format('woff'),
         url('https://cdn.shopify.com/s/files/1/0798/1013/4319/files/FaveCasual-ScriptBoldPro.woff2?v=1703517867') format('woff2');
}
h1, h2 {
    font-family: 'FaveCasual-ScriptBoldPro' !important;
}

@font-face {
    font-family: 'OptimaLTPro-MediumItalic';
    src: url('https://cdn.shopify.com/s/files/1/0798/1013/4319/files/OptimaLTPro-MediumItalic.ttf?v=1703518145') format('truetype'),
         url('https://cdn.shopify.com/s/files/1/0798/1013/4319/files/OptimaLTPro-MediumItalic.woff?v=1703518144') format('woff'),
         url('https://cdn.shopify.com/s/files/1/0798/1013/4319/files/OptimaLTPro-MediumItalic.woff2?v=1703518144') format('woff2');
}
  h6 {
    font-family: 'OptimaLTPro-MediumItalic' !important;
}

@font-face {
    font-family: 'Optimapromed';
    src: url('https://cdn.shopify.com/s/files/1/0798/1013/4319/files/OptimaLTStd-Medium.woff?v=1703518115') format('woff'),
         url('https://cdn.shopify.com/s/files/1/0798/1013/4319/files/OptimaLTStd-Medium.woff2?v=1703518115') format('woff2'),
         url('https://cdn.shopify.com/s/files/1/0798/1013/4319/files/OptimaLTStd-Medium.ttf?v=1703518115') format('truetype');
}
h5, p, a {
    font-family: 'Optimapromed' !important;
}
2

Hello @Meaux ,
Here is the Steps :

  • Check for errors: Use browser dev tools to inspect for font-related errors.
  • Verify file paths: Ensure URLs for fonts in your CSS code are correct.
  • Include multiple font formats: Use WOFF2, WOFF, and TTF formats for compatibility.
  • Check font names: Match font family names in CSS and @font-face rules, paying attention to case.
  • Optimize loading: Use preload or prefetch directives in HTML to speed up loading.
  • Resolve CORS issues: If fonts are from a different domain, address CORS settings.
  • Test on different devices: Check if the issue persists across various devices and browsers.
  • Isolate the problem: Try removing CSS rules or testing a single font to pinpoint the cause.
  • Seek expert help: If still unresolved, reach out to Shopify support for tailored guidance.