From 70578a3c5514298b9c5cbbe4ad02396dbc0e690d Mon Sep 17 00:00:00 2001
From: Erin O'Connell <erin@system76.com>
Date: Mon, 13 Jul 2026 17:55:28 +0000
Subject: [PATCH] migrate to brand fonts

---
 astro.config.mjs             | 31 ++++++++++++++++++++++++++++++-
 src/assets/css/variables.css |  9 +++++++++
 src/components/Head.astro    |  9 +++++++++
 3 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Head.astro

diff --git a/astro.config.mjs b/astro.config.mjs
index 031a3efe1..6b60c9fe0 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,7 +1,7 @@
 // @ts-check
 import { satteri } from "@astrojs/markdown-satteri";
 import starlight from "@astrojs/starlight";
-import { defineConfig } from "astro/config";
+import { defineConfig, fontProviders } from "astro/config";
 
 import { satteriRelativeMarkdownLinks } from "@system76/satteri-relative-markdown-links";
 import { viteStaticCopy } from "vite-plugin-static-copy";
@@ -65,10 +65,39 @@ export default defineConfig({
                 },
             },
             routeMiddleware: "./src/plugins/toc-formatting-middleware.ts",
+            components: {
+                Head: "./src/components/Head.astro",
+            },
         }),
     ],
     base,
     site,
+    fonts: [
+        {
+            provider: fontProviders.fontsource(),
+            name: "Fira Sans",
+            cssVariable: "--font-fira-sans",
+            weights: [400, 700],
+            styles: ["normal"],
+            subsets: ["latin"],
+        },
+        {
+            provider: fontProviders.fontsource(),
+            name: "Roboto Slab",
+            cssVariable: "--font-roboto-slab",
+            weights: [400, 700],
+            styles: ["normal"],
+            subsets: ["latin"],
+        },
+        {
+            provider: fontProviders.fontsource(),
+            name: "Ubuntu Mono",
+            cssVariable: "--font-ubuntu-mono",
+            weights: [400],
+            styles: ["normal"],
+            subsets: ["latin"],
+        },
+    ],
     image: {
         service: {
             entrypoint: "./src/avifImageService.mjs",
diff --git a/src/assets/css/variables.css b/src/assets/css/variables.css
index 4e513711a..ef73d22be 100644
--- a/src/assets/css/variables.css
+++ b/src/assets/css/variables.css
@@ -1,6 +1,15 @@
 :root {
     --sl-content-width: 47rem;
 
+    /* Brand typography, migrated from the old Nuxt site's @system76/design fonts. */
+    --sl-font: var(--font-fira-sans), var(--sl-font-system);
+    --sl-font-mono: var(--font-ubuntu-mono), var(--sl-font-system-mono);
+    --sl-heading-font: var(--font-roboto-slab), serif;
+
+    /* Match code block/inline code font size to body text (Starlight defaults them smaller). */
+    --sl-text-code: var(--sl-text-body);
+    --sl-text-code-sm: var(--sl-text-body);
+
     /* Dark mode colors. */
     --sl-color-accent-low: #0c292c;
     --sl-color-accent: #007883;
diff --git a/src/components/Head.astro b/src/components/Head.astro
new file mode 100644
index 000000000..7e2d20488
--- /dev/null
+++ b/src/components/Head.astro
@@ -0,0 +1,9 @@
+---
+import Default from "@astrojs/starlight/components/Head.astro";
+import { Font } from "astro:assets";
+---
+
+<Default />
+<Font cssVariable="--font-fira-sans" preload />
+<Font cssVariable="--font-roboto-slab" />
+<Font cssVariable="--font-ubuntu-mono" />