Fonts

base.css includes the @font-face rules for the three brand families, and the font files are served from design.online.uga.edu next to the stylesheet. Linking base.css is all a page needs; there is no separate font stylesheet to add.

If a page or template still links Google Fonts (fonts.googleapis.com), remove that link and its two preconnect hints. The Google stylesheet blocks rendering until it arrives from two extra origins, so a page that keeps it pays that delay on every cold load. Existing course files that hard-code the link keep paying it until someone edits them.

Families

Each family is a variable font, so one file covers every weight in its range.

Family	Variable	Weight range	Styles
Oswald	$font-sans	200 to 700	Normal
Merriweather Sans	$font-alt (body text)	300 to 800	Normal, italic
Merriweather	$font-serif	300 to 900	Normal, italic

Each file is split into two subsets. The latin file covers English text and common punctuation. The latin-ext file covers accented characters such as those in many names, and the browser downloads it only when a page uses one of those characters.

Font File URLs

Files live under a font-set folder, fonts/v1/. Files in that folder never change, so their URLs are safe to hard-code in preload links and are cached for a year. A future font update will ship in a new folder (fonts/v2/) and be announced in the release notes.

File	Used for
oswald-latin-wght-normal.woff2	Headings, navigation, hero text
merriweather-sans-latin-wght-normal.woff2	Body text, UI labels
merriweather-sans-latin-wght-italic.woff2	Italic body text, captions
merriweather-latin-wght-normal.woff2	Serif headings, long-form text
merriweather-latin-wght-italic.woff2	Italic serif text, quotes

Each latin file has a matching latin-ext file (for example oswald-latin-ext-wght-normal.woff2).

Every stylesheet loads the fonts from the same folder, https://design.online.uga.edu/fonts/v1/, including pinned versions such as /v1.11.0/css/base.css. A student moving between courses pinned to different versions downloads each font once.

Preloading

A preload tells the browser to fetch a font before it reads the stylesheet, which shortens the time text shows in a fallback font. Preload only the one or two files that render above the fold on most pages. For UGA Online pages, those are usually Oswald and Merriweather Sans normal:

<link
  rel="preload"
  href="https://design.online.uga.edu/fonts/v1/oswald-latin-wght-normal.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>
<link
  rel="preload"
  href="https://design.online.uga.edu/fonts/v1/merriweather-sans-latin-wght-normal.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>
<link rel="stylesheet" href="https://design.online.uga.edu/css/base.css" />

• Keep the crossorigin attribute even though the request carries no credentials. Fonts are always fetched in CORS mode, and a preload without it is not reused, so the font downloads twice.
• The preload URL must match the URL base.css requests exactly.
• Don’t preload italic or latin-ext files. Preloading files a page doesn’t use wastes bandwidth on every visit.
• Content pages in eLC don’t need preloads.

Pages that skip preloads can still save time with a preconnect. Browsers fetch fonts on a separate connection from the stylesheet (font requests carry no cookies), so without a hint the fonts wait for a second TLS handshake to design.online.uga.edu:

<link rel="preconnect" href="https://design.online.uga.edu" crossorigin />

Font Path in SCSS

Projects that compile the design system’s SCSS instead of linking base.css can point the @font-face rules at their own copy of the files with $font-path (default /fonts/v1):

@use '@uga-online/design-system/styles' with (
  $font-path: '/assets/fonts/v1'
);

Fallback Faces

Until a brand font arrives, text renders in a local system font. To keep text from moving when the brand font swaps in, base.css defines a fallback face for each family: Arial for Oswald and Merriweather Sans, Times New Roman for Merriweather. Each one is scaled with size-adjust and the ascent-override, descent-override and line-gap-override descriptors to match the brand font’s metrics. The font stacks list them second:

font-family: 'Oswald', 'Oswald Fallback', sans-serif;

Devices without Arial or Times New Roman (most Android phones) skip the fallback face and use their default font.

License

All three families are licensed under the SIL Open Font License 1.1, which allows self-hosting. The license files are published with the fonts: oswald-OFL.txt, merriweather-sans-OFL.txt and merriweather-OFL.txt.