Teutonic CSS

Font assignment

←

There are three typeface CSS variables: --font-standard (div), --font-body (p) and --font-headline (h1). The standard Teutonic theme here uses a serif typeface for paragraphs and the sans-serif font of your Operating System for anything else. You can assign all to use the same font, or three different ones by changing the CSS Vars.

Various standard web safe font-stacks are included in the orignal SCSS files. You can also load web fonts from Google fonts or alike and assign theme here. The example here shows how override font-face with CSS vars.

SCSS: _typeface-vars.scss

Default

Headlines

Paragraphs and lists.

Anything else.

Modified

Headlines

Paragraphs and lists.

Anything else.

<div class="flex gap_l text-all_l">
  <div>
    <h3 class="bo-b_xs pa-b_xs">Default</h3>
    <div class="ma-t_s">
      <h5>Headlines</h5>
      <p>Paragraphs and lists.</p>
      <div>Anything else.</div>
    </div>
  </div>
  <div>
    <h3 class="bo-b_xs pa-b_xs">Modified</h3>
    <div class="docs-font-face-example ma-t_s">
      <h5>Headlines</h5>
      <p>Paragraphs and lists.</p>
      <div>Anything else.</div>
    </div>
  </div>
</div>