• Hi,
    I need help changing the fonts of the navigation/main menu.
    Unfortunately most guides refer to do this via “Typography” in the customizer, which twenty twenty one unfortunately lacks (Why is that btw?)

    I managed to use a custom font for headlines and the title with no hassle via CSS, but I am having a hard time with the navigation. Any guidance on how to do this?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator jordesign

    (@jordesign)

    Hi @sebert81

    I need help changing the fonts of the navigation/main menu.
    Unfortunately most guides refer to do this via “Typography” in the customizer, which twenty twenty one unfortunately lacks (Why is that btw?)

    It’s correct that TwentyTwentyOne doesn’t have that option. I take it they made it as a deliberate design decision at the time it was developed.

    I managed to use a custom font for headlines and the title with no hassle via CSS, but I am having a hard time with the navigation. Any guidance on how to do this?

    It should be possible to also make a change for that with CSS in a similar method – but it depends on exactly what you have in mind. Are you able to share a link to the site, along with a little more detail of what CSS change you already made, and how you’d like to change the menu/navigation?

    You could also look into a plugin solution that would help manage/add custom fonts like this one:

    https://wordpress.org/plugins/olympus-google-fonts/

    Thread Starter sebert81

    (@sebert81)

    Hi,
    Thanks for your answer.
    Cant share a link because the site is not live yet. All I did so far is the following to include the locally hosted font AurachTri

    @font-face {
    font-family: AurachTri;
    src: url(.../AurachTri.ttf);
    font-weight: normal;
    }

    .site-title { 
    font-family: "AurachBi", Arial, sans-serif; 
    font-size:200%
    }

    ..same for various headlines.
    Now I want to do the same for the Main Navigation Menu under the header, but I don’t know how to adress it in CSS.

    Regards & Nice WE

    Sebastian

    • This reply was modified 10 months, 3 weeks ago by sebert81.
    Moderator jordesign

    (@jordesign)

    Hi Sebastian,

    without being able to see the site – I can’t be certain of this – but CSS code like this should work.

    ul#primary-menu-list li a{
    font-family: "AurachBi", Arial, sans-serif; 
    font-size:200%
    }
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change Font of Main Menu/Navigation’ is closed to new replies.