Font Not Rendering properly on on Safari/iPhone

Font Not Rendering properly on on Safari/iPhone

Unnati_22
Shopify Partner
1 0 0

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

 

Reply 1 (1)

PageFly-Theodor
Shopify Partner
691 86 98

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

 
 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.