Font Issues between desktop and mobile

[ROBIN]

On my site QT Wrap N Roll I have set everything to ComicSans MS as the font.

When I go to the site on my phone it has some strange script font, that is super hard to read and I don’t even see that as an option in the fonts dropdowns.  I haven’t uploaded any additional fonts to the site.

Can you give me some insight as to why this would be happening or how to make the font on the desktop the same as the mobile font?  I am completely perplexed.  I have never seen anything like this before.

Thank you in advance for any help you can give me.

[User]

@Robin

I get the same on phone, but desktop is ok.

Using the desktop “Inspect” right mouse button on the front page content text I get these resource loading errors:

1) Failed to load resource: net::ERR_BLOCKED_BY_CLIENT w.js:1

2) Failed to load resource: net::ERR_BLOCKED_BY_CLIENT s-202404.js:1

3) Failed to load resource: net::ERR_BLOCKED_BY_CLIENT cookieNSCconsent.min.js:1

4) Failed to load resource: net::ERR_BLOCKED_BY_CLIENT e-202404.js:1
jquery-migrate.min.js:2 JQMIGRATE: Migrate is installed, version 3.4.1
(index):343

5) Uncaught TypeError: Cannot read properties of undefined (reading ‘initialise’) at (index):343:64

Regards!

[scrambler]

I am not seeing console errors in the browser developer tools.

Regarding the fonts, many fonts are not available on mobile, and when they are not the specified alternate will be used.

Your font is set to “Comic Sans MS”,cursive,serif;

Which I believe means that if the Comic sans is not available it will look for locally supported cursive, and if none available to a local serif font.

So the first thing to check is if that comic sans MS is supported on your phone (what brand / model?)

Comic Sans – Wikipedia

So if on android, you may want to use a google fonts that is supported there instead

[Weaver]

@ROBIN –

There is a set of “Web Fonts” that Weaver shows at the bottom of the Font Picker font list. From the customizer, the web fonts have a heading that says these are web fonts, and advises against using them. In the classic editor, they are simply at the bottom of the list.

Web fonts were standardized way before phones were the dominant web access tool. As phones were developed, phone browsers tended to support only serif, sans-serif, and cursive. Those are the fall back. Each phone brand can implement these however they want, and apparently Comic Sans  defaults to something ugly on your phone.  Web Browsers, on the other hand, continue to support the old “web safe” font set.

That is why we recommend NOT using any of the Web Fonts. They are basically obsolete, and it seems to have become unreliable on what you get for the fallback font. You simply can not count on phones, new or old, to display something that you might expect when specifying “Web Safe Fonts”.

So, you really should switch to one of the fonts provided by Weaver Xtreme. Handlee is the Comic Sans equivalent provided by Weaver for all versisons. Xtreme Plus has a couple of others. Xtreme Plus also has a couple other cursive fonts.

If you are concerned about performance, at some recent point, Weaver Xtreme has started to self-host font files (due to EU rules mostly – the EU doesn’t like it when a site hosts Google fonts through Google servers as they have tracking).

The way Weaver host font files is very efficient. The font files are never loaded until used or needed, so there is essentially zero performance hits for using the Weaver font selections.

So, bottom line – to get 100% consistent look of you site over desktop browsers, and phone browsers, use Google fonts as provide by Weaver Xtreme.

[ROBIN]

Thanks, everyone.  I thought I was using the Weaver font choices, but I changed the CSS so that the backup fonts are not unique and everything looks awesome.

If that isn’t ok, to have done, please let me know.

Weaver Rocks!  I couldn’t ask for a better option.

Thanks!

 

[User]

@Robin

Your font resolution looks great! Well done.

FYI I am still getting the same 5x failed to load error messages.

Here is additional information on one of them:

Failed to load resource: net: cookieNSCconsent.min.js:1
net::ERR_BLOCKED_BY_CLIENT
https://qtwrapnroll.com/wp-content/plugins/beautiful-and-responsive-cookie-consent/public/cookieNSCconsent.min.js?ver=3.2.0

Regards!

[Author]

Posts