Tesseract Header Menu Font Change

  • All,

    I’ve tried to figure this out over the past few weeks, as I have with everything on my site, but alas, I’m stumped. My url is as follows:

    https://www.changeclothesbrand.com

    I am trying to change the font on my header menu (on all pages), and cannot figure out how to do it. I owe whoever can help me with this big time.

    Thanks!

Viewing 15 replies - 1 through 15 (of 24 total)

  • I am having the same problem: I can change any font but the menu one. Awkward, since I’m designing the site with a font that has serifs, and the menu is sans-serif.
    Has anyone found a solution? (I cannot post a URL since I am working on a local host.)

    After a bit more searching and thinking, I came up with a solution. It requires the “Easy Google Fonts” plugin, which is recommended by the Tesseract theme developer in any case. I discovered that the css class for the menu items is “menu li” – and so the solution is:

    1) Go to dashboard > settings > Google Fonts.
    2) Click, “create a new font control.”
    3) Name it, “Header-Footer Menu.” (Name it anything you like, really, as long as you’ll recognize it.)
    4) Click the “Create Font Control” button.
    5) Type “.menu li” in the “Add CSS Selectors” box, and press tab.
    6) Click “Save Font Control.”

    Now, when you go to your page, you will be able to use Customize > Typography to modify the font, just as you would with any “Easy Google” font.

    Hope this helps someone!

    Thanks a lot rmadla, you definitely did help someone! Have a good day!!

    I’ve just played around a bit on my own site. Indeed, while I can change the font family (e.g. from Stoke to Open Sans), the “Font Weight/Style” options do not alter the appearance of the font. I’m sorry, but it appears that I am unable to help after all.

    Anyone else have any ideas as to why the “Font Weight/Style” option would be ineffective?

    thanks, it′s difficult to explain, but opening a new google font is not enough, sure I know how to find it in the typo, but where do you tell WP it has to control the header/navigation?

    I also know how to add this CSS selector to the new font, but it should be added somewhere else, like if you use it in a page/text, you′ll add something before like “headline-whatever” in the html code. But here it′s the navigation…

    Hm. I haven’t had to do that. I just made a video of the entire process, using my own page as an example, from start to finish. Maybe it’ll help – or maybe something is different between our systems?
    https://youtu.be/ODRtGHc-Ds0

    rmadla thanks for the video. I did it so, and i could change the menu font to Open Sans Font, but THEN i cannot change it to another color or new font.
    What could be the problem?.
    This is my site:

    https://peruseafood.org/web/

    Regards.

    Hi all,

    I did as said above, but there seems to be a bug?

    As long as I have switched of the Header Right Menu, I cannot change the font of my “main” menu at all. When I switch something on (e.g. Menu), then the font can be changed?

    Best regards

    I’m trying to do this also and having the same problem.

    Only if i choose ‘menu’ on the right hand side as a header option does the font change. Otherwise it remains the same!

    This is driving me mad…

    Same issue as stated above

    Hi!
    Problem solved.

    1) Go to dashboard > settings > Google Fonts.
    2) Click, “create a new font control.”
    3) Name it, “Main Menu” (Name it as you like)
    4) Click the “Create Font Control”
    5) In the “Add CSS Selectors” box type “.nav-menu”
    6) Click “Save Font Control.”

    From that moment, you can go to your page and you will be able to use Customize > Typography > Theme Typography and modify the font in “Font family”.

    Hope it works!

    @qbalaconcept

    Thank you for that solution!

    I did however solve the problem by editing the section 02. Theme Base in the theme stylesheet. One issue that neither of our solutions solve is that you can’t change the font weight. For now I’m ok with just being able to use whatever font I want, but if anyone has a tip on what to do, it would be much appreciated.

    Otisae, please, may you kindly explain how you solved this issue by editing the section 02?.
    Thanks in advance.

    Hello rmadla!

    I just used your suggestions about changing the fonts in the menu header of tesseract theme and It worked!

    Do you happen to know how to change the name branding as well?
    I believe it might fall under a different name like “site branding” or “inline-block” or similar?
    I’d just like to have the google font control for that as well like we did for the rest of the header.
    Please let me know.
    V.

Viewing 15 replies - 1 through 15 (of 24 total)
  • The topic ‘Tesseract Header Menu Font Change’ is closed to new replies.