Migrate to System76 brand fonts (Fira Sans, Roboto Slab, Ubuntu Mono)

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",

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;

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" />