Home Forums Weaver Xtreme Theme Primary menu font changes on mobile

Topic Resolution: Answered
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #70876
    Answered
    cynical
    Participant

    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”.

    #70877
    scrambler
    Moderator

    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.

     

    #70878
    Weaver
    Keymaster

    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.

    #70879
    cynical
    Participant

    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?
    #70880
    scrambler
    Moderator

    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

    #70881
    Best Answer
    cynical
    Participant

    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.

    #70954
    scrambler
    Moderator

    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

    #70955
    cynical
    Participant

    Not me.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.