Why is my mobile display showing fonts thicker than in the editor?

Store Design
1

Hi everyone,

I am having an issue with how my font weights are being displayed on my mobile.

I have attached 2 images below that show screenshots from my mobile and also from inside the shopify editor.

The screenshots taken from my mobile for some reason have an added thickness to various headings and text.

I have also added a seperate page of screenshots from inside my store editor which shows how the fonts should appear. Can anyone help me with how i can get these fonts the display the correct weight when viewed on my mobile? Thank you kindly.

My store link below

https://6q0ux7a6i66pr2rz-54993551588.shopifypreview.com (this is a preview link that will expire in 2 days)

Wrong font weights
Wrong font weights1754×1240 397 KB

Correct font weights
Correct font weights1754×1240 238 KB

2

  1. Use responsive font units: Consider using responsive font units, such as rem or em, instead of fixed pixel values. This allows the font size and weight to scale appropriately based on the user’s device and screen size.

  2. Check font loading: Ensure that the font files you are using are properly loaded and available on mobile devices. If the font files are not loading correctly, it may result in a fallback font being used, which can affect the appearance of font weights.

  3. Use system fonts: If you’re using custom web fonts, they may render differently across different devices. Consider using system fonts or web-safe fonts to achieve consistent font weights across various platforms.