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, Merriweather Fallback, serif
.util-font-family-sans	Oswald, Oswald Fallback, sans-serif
.util-font-family-alt	Merriweather Sans, Merriweather Sans Fallback, sans-serif

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

All three families load with base.css from design.online.uga.edu, so pages don’t need a Google Fonts link. Each is a variable font: Oswald covers weights 200 to 700, Merriweather Sans 300 to 800, and Merriweather 300 to 900. The fallback faces are system fonts scaled to match each family, so text doesn’t shift when the web font finishes loading. See Fonts for the file URLs and preload guidance.

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>