Font Not Rendering properly on on Safari/iPhone

Store Design
, ,
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