Custom fonts not showing on iOS

As you can see in this image; my font displays in Chrome for desktop, but doesn’t display on iOS on my iPhone

I’ve tried various ideas but none have worked – any solution?

Hello,

Please, provide us your admin access so we can log in and check this on your side.

Thank you in advance.

Hi Bogdan, Please see below in the private section;

Custom font that you uploaded on your site supports only 400 (Regular) font-weight, but your promo banner element title use 600 (Semi Bold) font weight. To fix this issue you need to upload and set up “Semi Bold” version of this font in your site theme settings, or set font-weight 400 (Regular) in promo banner title element (video: https://gyazo.com/417674d8bb2e3ab3ab9fa16be9ca6ede).

Kind Regards

Not true, the font supports both 400pt and 600pt.

Why does it work on desktop and in the mobile preview?

You uploaded to your site only 400 (Regular) version of “SF Pro” custom font
“FontsFree-Net-SFProDisplay-Regular” (https://prnt.sc/11smn1n), so it will work properly on all devices only if font-weight: 400 is used. In other cases font-weight will depend on from fallback weights which may vary by device, browser and operating system. Our theme didn’t have any additional options that can influence font file structure and font display directly depend on from initial font, browser or operating system.

To fix this issue you need to:
– Change promo banner title to font-weight: 400;
Or
– Upload 600 (Semi Bold) version of following custom font;

Kind Regards

How come it shows as 600 in the nav?

To test this custom font on different devices we create a test page on your site (Pages => Font test) with all available font-weight combination of this font (100,200,300,400,500,600,700,800,900). Results are below:

Android Chrome (Samsung S21 https://prnt.sc/11suua9) – difference between 400 and 600 is visible
Mac Chrome (MacBook Pro https://prnt.sc/11suz29) – difference between 400 and 600 is visible
Mac Safari (MacBook Pro https://prnt.sc/11suy3l) – difference between 400 and 600 is visible
Windows Chrome (PC https://prnt.sc/11sv2gd) – difference between 400 and 600 is visible
iOS (iPhone 12 Pro https://prnt.sc/11suvqn) – difference between 400 and 600 almost not visible and different from other operating systems

As you can see fallback weights in iOS is different from Mac, Windows and Android.

In your previous reply you referred to site navigation, but it can be visible only on desktop devises (Mac, PC) and can’t be shown on mobile device (iOS), so if a similar menu was present on iOS issue with this font was the same as on promo banners title

Unfortunately since this is a font issue it can’t be fixed via WordPress theme. We recommend you to, search for different version of following font, use only 400 font-weight or use different custom font.

Kind Regards

[Author]

Posts