Home › Forums › Weaver Xtreme Theme › Primary menu font changes on mobile
- This topic has 7 replies, 3 voices, and was last updated 4 days, 10 hours ago by
cynical.
-
AuthorPosts
-
June 8, 2022 at 12:34 UTC - Views: 44 #70876
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”.
June 8, 2022 at 16:49 UTC - Views: 39 #70877scrambler
ModeratorMobile 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.
June 8, 2022 at 16:54 UTC - Views: 39 #70878Weaver
KeymasterMany, 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.
June 8, 2022 at 17:18 UTC - Views: 35 #70879cynical
ParticipantSigh, this looks to be true.
- What is the right CSS element to use in customizing primary menu fonts?
- Anyone have a handy chart of “universally supported” mobile fonts?
June 8, 2022 at 20:12 UTC - Views: 33 #70880scrambler
ModeratorIt 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
June 8, 2022 at 20:19 UTC - Views: 31 #70881This 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.
June 27, 2022 at 16:01 UTC - Views: 8 #70954scrambler
ModeratorI 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
June 27, 2022 at 18:42 UTC - Views: 6 #70955cynical
ParticipantNot me.
-
AuthorPosts
- You must be logged in to reply to this topic.