Primary menu font changes on mobile

[cynical]

http://www.Cynical.ws

The primary menu has “comic sans” assigned as the font. Displays fine on desktop.

However, on mobile (at least Samsung S10e and Tab6 Lite) the font switches to some cursive font.

I’m not instantly seeing a config option for mobile menu fonts, and everything labeled “mobile” in the “Menus & Info Bar” tab has defaulted to “inherit”.

[scrambler]

Mobile browser do not support all fonts, so every font has a fallback if the primary font is not supported by the browser.

On desktop, if I shrink the browser until the mobile menu, the menu stays Cursive, so I suspect the mobile device you are looking at does not and therefore uses the fallback which is cursive.

You can change the fallback to something else using CSS, as long as you know of a supported font there.

 

[Weaver]

Many, if not most, mobile devices do NOT support standard “web safe” fonts such as Comic Sans. The will show some alternative font.

There really is no such thing as a mobile specific font. The default mobile font can vary from browser to browser and device to device. Apple devices have different defaults than Android devices. And there is a set of “web safe” fonts that really only apply to desktop browsers. All this is left over from days when mobile devices had limited memory, and so they never really supported “web safe” fonts. In general, for example, Android devices have only supported a Sans font, a Serif font, and a monospace font.

So the only solution to this problem is to use one of the theme supplied Google fonts, or add new Google fonts using the font features of Weaver Xtreme Plus. There are also plugins that can deliver new fonts, especially with the Block editor.

Note: apparently scrambler and I were writing answers at the same time, so there is duplicate information.

[cynical]

Sigh, this looks to be true.

1. What is the right CSS element to use in customizing primary menu fonts?
2. Anyone have a handy chart of “universally supported” mobile fonts?

[scrambler]

It depends what primary fonts was selected as they each are applied with their own class.

in your case right now the rule in action is

.font-comic-neue {‘Comic Neue’, cursive;}

But as weaver mentioned, may be adding google fonts would be the way

[cynical]

This reply has been accepted as the best answer.

Thanks. I took he Google font path, and everything is OK now.

Before I forget, the support here is and always has been fantastic. Greatly appreciated.

[scrambler]

I saw notification for a new post but nothing is here.

If you did post something with a link, try using a verbal description of the link in case the forum is blocking the post.

like siteDOTcom

[cynical]

Not me.

[Author]

Posts