[Support request] Heavier Font Weight not Showing on Mobile

[William]

Hi there!

I am probably overlooking something, but wanted to see if there is a way to keep the heavier font weight when viewing on Mobile. For example on the following article: https://thebullfighter.com/how-to-build-quality-wordpress-themes/

The Desktop version is 900 weight. When viewing on the font shows up much thinner.

In this link: https://imgur.com/a/0vQyz42 the top is on Desktop, and the bottom is mobile.

Ideally, I’d like to keep the font weight just as heavy on mobile if that is possible?

Thank you in advance for any help. I love generatepress, you all are ALWAYS so AWESOME.

[Leo]

Hi William,

The code is showing that the mobile font-weight is also 900
https://www.screencast.com/t/tyXCBdQr

And it’s showing correctly on my iPhone with Chrome as well:
https://www.screencast.com/t/snHpQ6XIc

Are you getting this issue with all browsers? Do you happen to have another device to test?

[William]

Hi Leo –

That is Montserrat code at 900. I have since changed to Helvetica to have a websafe font. I’m not sure why the site hasn’t updated yet, but the Helvetica is showing a much lighter looking version on mobile. Using Safari.

Thanks,
Jed

[Leo]

Can you clear any caching plugin or server level caching you might be using?

[William]

Thank you, Leo. Can you please check it out now? Should be showing as described originally.

https://imgur.com/a/0vQyz42 Thicker is desktop, thinner is mobile (ios)

[Ying]

Hi William,

Helvetica is no longer standard fare on a PC system while it is for most iOS devices. So, if you use Helvetica then show it on a PC, the font will be replaced with a similar font, likely Arial.

I think that’s why they look different.

I would suggest using Arial font to be safe 🙂

[William]

Thanks Ying. I just updated to Arial and still seeing the heavier version on desktop and thinner version on mobile. Any way to change this?

[Leo]

Can you try adding this CSS?

html {
    -webkit-font-smoothing: unset;
    -moz-osx-font-smoothing: unset;
}

[William]

Hi Leo –

I just added that. Seems to be no change. Sorry to be a pain here!

Thank you.

[Ying]

I did some research, so common fonts like Arial/ Helvetica usually only have fontweight 400(normal)and 700(bold), 900 doesn’t exsist.

The heavier font you see on desktop is not Arial or Helvetica, it’s likely Arial Black (not sure).

So if you want to have 900 fontweight on both mobile and desktop, try use fonts that do have 900 fontweight, for example: Montserrat 🙂

[Tom]

The browser should fall back to 700 if 900 isn’t available, I think. I just took a look but the site is using Poppins now.

I think the best bet is to choose a font and locally host it so you have full control over what weights are available across all browsers and devices. System fonts can be a little tricky in that regard.

[Author]

Posts