Programming Tooling

Extra Fonts for Extra Cases

boot­strap and bootScore use SCSS vari­ables — as we know. To group fonts, the file bootstrap/_variables.scss pro­vides the vari­ables $font-family-base, $font-family-sans-serif, $font-family-monospace and $font-family-code. A vari­able $font-family-serif does not exist. If we over­write fam­i­ly-base in our _bscore_variables.scss file, we rede­fine the default. If we want to use a deviant font for our head­ings, we have to rede­fine the vari­ables $headings-font-family and $display-font-family. This is suf­fi­cient if we want to use only two font fam­i­lies. But if we want to use a third font for our menus, we need to do things dif­fer­ent­ly:

[ en | de ]


  • Define the vari­able $menu-font-family: 'PT Sans', sans-serif, !default; in your child theme file scss/_bscore_variables.scs
  • Add the fol­low­ing lines to your child theme file scss/_bsscore-custom.scs:
  font-family: $menu-font-family;

.footerSubMenu {
  font-family: $menu-font-family;
  • Assign the new class to the wid­gets Footer 1 to Footer 4 con­tain­ing a menu list via <ul class="footerSubMenu">.


Again, briefly, about the need to do that:

Menus usu­al­ly look bet­ter with sans-serif fonts. If we have already assigned a sans-serif font to the $font-family-base vari­able, every­thing is fine. But if we have assigned a serif font and want to have a deviant font for our selec­tors, we must select a sans-serif font for the head­lines and for the menus. bootScore has embed­ded the main menu into a div with the ID bootscore-navbar. We can reuse that. But for the sub­menus in the foot­er area, we must define a cor­re­spond­ing class and assign it to the lists man­u­al­ly.

Leave a Comment

Your email address will not be published. Required fields are marked *

To top