Font Not Rendering properly on on Safari/iPhone

Store Design
, ,

Topic summary

A custom font displays correctly on most devices but exhibits incorrect font weight and spacing when viewed on iPhones/Safari. The issue persists despite multiple troubleshooting attempts.

Visual Evidence:

  • Screenshots provided showing the discrepancy between intended appearance (left) and actual iPhone rendering (right)
  • Store preview link included for reference

Suggested Solutions:

  • Font file formats: Verify all necessary formats are uploaded (.woff2, .woff, .ttf), with emphasis on WOFF2 for mobile compatibility
  • CSS adjustments: Review and potentially modify font-weight and letter-spacing properties specifically for iPhone rendering
  • CSS specificity: Ensure selectors are strong enough to override iPhone default styling
  • Cross-browser testing: Test across different iPhone browsers (Safari, Chrome) to isolate the issue
  • Fallback fonts: Consider switching to built-in fonts with fallback options if other solutions fail

The discussion remains open with no confirmed resolution yet.

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

We’ve used a custom font on one of our stores. The font shows perfectly fine on all other devices, but the font weight and font spacing doesn’t render properly on phones. We’ve tried all possible ways we could, but it still won’t work. The one on the right is how it looks on iPhone and the screenshot on the left is how it is supposed to look. Please help with this.

Store Preview - https://kppdyr4hh167yzem-42439409816.shopifypreview.com

Unnati_22_0-1718625363621.png
Unnati_22_0-1718625363621.png1350×778 254 KB

2

Hi @Unnati_22 ,
This is Theodore from PageFly - Shopify Page Builder App.

Custom font issues on iPhone in your Shopify store? Here’s how to fix weight and spacing:

  1. Font Files: Check you uploaded all formats (.woff2, .woff, .ttf) especially WOFF2 for mobile.

  2. Font Code: Review CSS for font-weight and letter-spacing. Slight adjustments might be needed for iPhones.

  3. CSS Specificity: Ensure your CSS selectors are strong enough to override iPhone defaults.

  4. Browser Issues (Less Likely): Check font rendering on different iPhone browsers (Chrome, Safari) to isolate the problem.

  5. Consider Font Fallback: If all else fails, choose a font with built-in fallback options for better cross-device consistency.

Best regards,
Theodore | PageFly