Extra Fonts for Extra Cases

bootstrap and bootScore use SCSS variables — as we know. To group fonts, the file bootstrap/_variables.scss provides the variables $font-family-base, $font-family-sans-serif, $font-family-monospace and $font-family-code. A variable $font-family-serif does not exist. If we overwrite family-base in our _bscore_variables.scss file, we redefine the default. If we want to use a deviant font for our headings, we have to redefine the variables $headings-font-family and $display-font-family. This is sufficient if we want to use only two font families. But if we want to use a third font for our menus, we need to do things differently:

[ en | de ]

Solution

Define the variable $menu-font-family: 'PT Sans', sans-serif, !default; in your child theme file scss/_bscore_variables.scs
Add the following lines to your child theme file scss/_bsscore-custom.scs:

#bootscore-navbar{
  font-family: $menu-font-family;
}

.footerSubMenu {
  font-family: $menu-font-family;
}

Assign the new class to the widgets Footer 1 to Footer 4 containing a menu list via <ul class="footerSubMenu">.

Background

Again, briefly, about the need to do that:

Menus usually look better with sans-serif fonts. If we have already assigned a sans-serif font to the $font-family-base variable, everything is fine. But if we have assigned a serif font and want to have a deviant font for our selectors, we must select a sans-serif font for the headlines and for the menus. bootScore has embedded the main menu into a div with the ID bootscore-navbar. We can reuse that. But for the submenus in the footer area, we must define a corresponding class and assign it to the lists manually.