Changing the Font – Family, Size, etc

Font Typeface

Google Fonts

UberMenu includes over 35 popular Google Fonts, which you can switch via the Customizer

Font Family

Since version 3.2.1

If you would like to set a standard font stack, or use a font face that has already been loaded on your site via other means (like @font-face), this is the best way to set that font family for your menu. This setting is available in the Fonts section of the Customizer.

Here’s an example font stack for Helvetica: 'Helvetica Neue', Helvetica, Arial, sans-serif

Custom Fonts

You can set whatever font style you like via the Custom Font Property setting (of course, you must already load the resource for this font)

Example font property: bold 12px/24px Helvetica, Arial, sans-serif

Please note this is the font property, so you need to include font size and font family. You’ll only want to use this setting if you want the same font family, font size, and font weight across the entire menu.

Adding a custom Google font

If you want to add a Google font that does not appear in the list, you can do so programmatically with a filter in your child theme’s functions.php file.

For example, here’s how we’d add the font “Varela”

add_filter( 'ubermenu_registered_fonts' , 'my_custom_fonts' );
function my_custom_fonts( $fonts ){
   $fonts['varela'] = array(          //a unique ID for this font, no spaces
      'label'  => 'Varela',           //The title that will appear in the font list
      'family' => 'Varela',           //The family name that will be used to load the font from Google
      'stack'  => "'Varela', sans-serif",  //The font-family property used in the CSS style
   );
   return $fonts;
}

This font will then become selectable in the Google Fonts list in the Control Panel and Customizer.

Targeting a specific menu level

Let’s say you wanted to use a different font in the menu bar than the submenu. You could write some custom CSS to accomplish this. The simplest way would likely be to use the font settings to set a global font for the menu, and then override that with custom CSS just for the top level. But this CSS will create two styles – one for the top level, one for the submenu – for demonstration purposes.

In this example, we set Raleway as the font for the top level, and Droid Serif as the font for the submenu.

/* Top Level: Raleway */
.ubermenu .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target{
	font-family:"Raleway";
}
/* Submenu: Droid Serif */
.ubermenu .ubermenu-submenu .ubermenu-item .ubermenu-target{
	font-family:"Droid Serif";
}

Please note that you need to make sure you are loading the proper font assets if you are trying to load Google Fonts or a hosted @font-face.

UberMenu 3