How to customise Menu Font

[freedomdesign]

Hi there,

We had a designer redo our brand guidelines, and the font for headings is Mundo, which isn’t one of the options.

I’ve started to setup the css for this and just want to check I’m doing things right and to ask something.

Evergreen Alpine Academy: Professional Mountain Educators in Hakuba

I’ve added the following CSS in Global CSS:

@font-face {
  font-family: 'Mundo';
  src: url('https://www.evergreen-alpineacademy.com/wp-content/themes/x-child/fonts/MundoSansStd-BoldItalic.eot');
  src: url('https://www.evergreen-alpineacademy.com/wp-content/themes/x-child/fonts/MundoSansStd-BoldItalic.woff2') format('woff2'),
       url('https://www.evergreen-alpineacademy.com/wp-content/themes/x-child/fonts/MundoSansStd-BoldItalic.woff') format('woff'),
       url('https://www.evergreen-alpineacademy.com/wp-content/themes/x-child/fonts/MundoSansStd-BoldItalic.ttf') format('truetype'),
       url('https://www.evergreen-alpineacademy.com/wp-content/themes/x-child/fonts/MundoSansStd-BoldItalic.svg#MundoSansStd-BoldItalic') format('svg'),
       url('https://www.evergreen-alpineacademy.com/wp-content/themes/x-child/fonts/MundoSansStd-BoldItalic.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  /* font-style: italic; */
}

body {
  font-family: 'Lato', sans-serif;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Mundo", Arial, sans-serif;
    /*text-transform: capitalize; */
    font-weight: bold;
    font-style: italic;
}

Question 1:
This works for setting the font of the headings, but it can take time to load the font and the default loads first. Is there no way around this?

Question 2:
What is the CSS to set the menu and submenu headings to Mundo as well?

Question3:
Do I need the body font-family code or is that already set in the fonts section of the Customizer?

Thanks in advance!

[rad]

Hi @freedomdesign,

Thanks for reaching out.

1. It’s only normal for the browser to display default font while it still downloading the font files. But, it only happens when it’s loaded for the first time or when you cleared the browser cache. The browser will keep the copy of the fonts as the cache to re-use it. But, if you wish to enhance the loading speed for new visitors (first-time viewers where fonts aren’t cached yet), I recommend using CDN to serve your font files. It’s not gonna solve the issue, but it will improve the loading speed of the font files.

2. The CSS should be this

.x-navbar .x-nav>li>a>span {
font-family: "Mundo", Arial, sans-serif;
}

3. You mean you wish to apply “Mundo” as body font as well? If yes, then you still need to declare it. It’s not part of customizer since it’s a custom font

Thanks!