[Resolved] Font displays different on desktop and mobile

[Robin]

Hey there – I have enabled the new Typography system. My body font is Inter and H1 and H3 font is Lora.

However they do not display on mobile devices only on desktop. My site is – eatweeds.co.uk

Could you help me out, please? Thanks.

[Elvin]

Hi Robin,

Can you share a screenshot of this occurrence for both mobile and desktop?

I’ve tried checking the site on desktop and my android phone and they seem to both use Lora,serif.

Note: Make sure to clear all forms of cache so the latest changes would reflect on your end. 🙂

[Robin]

I have cleared the cache on both my site and on my CDN and still nothing.

The fonts don’t show on mobile.

Anything else I can do? This has only happened since I enabled the new Typography system and there doesn’t appear to be any documentation on this new typography system.

What am I missing? TIA.

[David]

Hi there,

I can see Lora loading, but not Inter on either desktop or mobile. The request for Inter is not being made.

In the Customizer > Typography. The top panel titled Font Manager, is the Inter font listed there ?

[Robin]

Hi David,

Yes it is, please see this screenshot.

And the snippet that used to install it is turned off, see here.

[David]

Was the Inter font originally installed locally ?

[Robin]

Yes it was originally. I’ve just checked ‘Media’ and cannot find it in there. I’ve also gone into ‘Uploads’ via FTP and don’t see it in there.

[David]

Odd… updating the theme or enabling the new typography option wouldn’t have interfered with the media files or any child theme settings.

Are you wanting to serve them locally ? If not can you edit the Inter font in the font manager and check the Google Font toggle.

[Robin]

The Google font toggle was already selected.

However, I unselected it. Searched for Inter. Selected it and turned back on the Google toggle.

It seems to have reset everything as now the Inter font shows on my mobile devices.

Thanks for your help, as always, David. Got there in the end 🙂

Have a good day.

[David]

Glad to hear that!!

[Robin]

Hi there,

I have just tried to set my font to Libre Baskerville, yet the same problem that I mention above is happening again. It does not show on any devices.

When I toggle the Google font on/off/on, nothing happens. Libre Baskerville does not show on any of my devices, only the ‘serif’ font.

Could you help me please? Thanks.

[Elvin]

I see it being used by the site’s CSS but the font itself isn’t being loaded from Google fonts.

Can you try clearing your cache again? So the @font-face importation updates the entries and adds Libre Baskerville to the request.

Let us know how it goes.

Note: It’s good practice to clear all forms of cache everytime you make a change so a new cached file is generated with the newest changes.

[Robin]

Wonderful, Elvin. That worked. I had to clear the CDN cache rather than just the site cache.

Note to self: Always read the support staff’s signature line 🙂

All the best.

[Elvin]

Glad you got it sorted. No problem. 😀

[Author]

Posts