Fonts für besondere Anlässe

Boot­strap* und bootS­core ver­wen­den SCSS-Varia­blen — wie wir wis­sen. Um Schrif­ten zu grup­pie­ren, bie­tet die Datei bootstrap/_variables.scss die Varia­blen $font-family-base, $font-family-sans-serif, $font-family-monospace und $font-family-code. Eine Varia­ble $font-family-serif exis­tiert nicht. Über­schrei­ben wir fami­ly-base in unse­rer Datei _bscore_variables.scss, legen wir den Default neu fest. Wol­len wir für unse­re Über­schrif­ten einen abwei­chen­den Font ver­wen­den, müs­sen wir die Varia­blen $headings-font-family und $display-font-family umde­fi­nie­ren. Das reicht aus, wenn wir nur zwei Schrift­fa­mi­li­en benut­zen wol­len. Möch­ten wir hin­ge­gen auch ande­re Fonts für beson­de­re Anläs­se ver­wen­den, z.B. einen drit­ten Font für unse­re Menüs, dann müs­sen wir anders aktiv wer­den:

Lösung

• Defi­nie­re in Dei­ner Child-The­me-Datei scss/_bscore_variables.scs noch die Varia­ble $menu-font-family: 'PT Sans', sans-serif, !default; (mit einem Men­u­font Dei­ner Wahl.)
• Tra­ge in Dei­ner Child-The­me-Datei scss/_bsscore-custom.scs die fol­gen­den Zei­len ein:

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

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

• Wei­se über das WP-Backend den Wid­gets Footer 1 bis Footer 4, die eine Lis­te als Menü ent­hal­ten, mit <ul class="footerSubMenu"> die neue Klas­se zu.

Hintergrund

Noch ein­mal kurz: Wie kann die­ser Bedarf eigent­lich ent­ste­hen?

Menüs sehen in der Regel mit seri­fen­lo­sen Fonts bes­ser aus. Haben wir in der Varia­ble $font-family-base eh einen seri­fen­lo­sen Default-Font fest­ge­legt, ist alles gut. Ver­wen­den wir aber einen Seri­fen­font, müs­sen wir — wenn wir es denn so wol­len — nicht nur den Über­schrif­ten einen seri­fen­lo­sen Font zuwei­sen, son­dern auch die Menüs. Das Haupt­me­nu ist sei­tens bootS­core in einem Bereich mit der ID bootscore-navbar ein­ge­bet­tet. Die­se ID kön­nen wir wei­ter­ver­wen­den. Für die Sub­me­nüs im Foo­ter­be­reich müs­sen wir uns eine ent­spre­chen­de Klas­se defi­nie­ren und den Lis­ten manu­ell zuwei­sen.

---

Und in welchem Zusammenhang …

… steht das mit unse­rer Migra­ti­on zu bootS­core? Nun, hat Web-Desi­gne­rin im Rah­men ihrer Anpas­sun­gen die Fra­ge einer guten Bebil­de­rung beant­wor­tet, kann sie ent­spannt Tags und Wol­ken in ihre Site ein­bin­den, ihre Über­blicks­sei­te ver­bes­sern und eine eige­ne Landing­pa­ge gestal­ten. Ob die ent­stan­de­ne Fül­le der eige­nen Lese­rin wirk­lich nutzt, ob es nicht schlan­ker geht und wie, ob dezen­te­re Ver­wei­se und spe­zi­el­le Fonts auch für beson­de­re Anläs­se die Les­bar­keit erhö­hen, all das gilt es zu beden­ken. Das tut auch die­ser Post.

---

Im Übri­gen: Män­ner sind mit­ge­meint.