Extra Fonts for Specific Cases

boot­strap and bootScore use SCSS vari­ables — as we know. Group­ing fonts is done by vari­ables. And we can define two groups. This is suf­fi­cient if we want to use only two font fam­i­lies. But if we want to use extra fonts — for exam­ple, a spe­cial google font in our menus -, we need to do things dif­fer­ent­ly:

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. Here is a way to use more groups:

Solution

• 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:

#bootscore-navbar{
  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">.

Background

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.

---

And how does this …

… sup­port our migra­tion to bootScore? Well, when the web design­er has com­plet­ed her work on good illus­tra­tions, she can relax and inte­grate tags and clouds into her site, improve her overview page and design her own land­ing page. Whether the result­ing full­ness real­ly ben­e­fits her own read­er, whether it can become slim­mer and how, whether more dis­creet ref­er­ences and spe­cif­ic fonts also increase the read­abil­i­ty, all this she should nev­er­the­less con­sid­er while imple­ment­ing these fea­tures. This post sup­ports these steps towards a per­son­al­ized bootScore site.

---