Font Family

Font family utilities switch between the three font stacks used in the design system.

Font Stacks

Class	Font Family
.util-font-family-serif	Merriweather, serif
.util-font-family-sans	Oswald, sans-serif
.util-font-family-alt	Merriweather Sans, sans-serif

The default body font ($font-stack-primary) is Merriweather Sans.

Examples

Merriweather (serif) — .util-font-family-serif

Oswald (sans-serif) — .util-font-family-sans

Merriweather Sans (alt) — .util-font-family-alt

<div style="display: grid; gap: 1rem">
  <p class="util-font-family-serif util-font-size-md util-margin-all-none">
    Merriweather (serif) — .util-font-family-serif
  </p>
  <p class="util-font-family-sans util-font-size-md util-margin-all-none">
    Oswald (sans-serif) — .util-font-family-sans
  </p>
  <p class="util-font-family-alt util-font-size-md util-margin-all-none">
    Merriweather Sans (alt) — .util-font-family-alt
  </p>
</div>