feat(apollo-vertex): load Inter font via next/font and add registry:font item

creilly11235 · claude · creilly11235 · commit 77850794e9c6 · 2026-04-07T12:53:41.000-07:00
Inter was declared in theme CSS variables but never actually loaded,
causing the browser to fall back to system fonts. Use next/font/google
with variable: "--font-sans" following the shadcn pattern, and move
font declarations out of theme cssVars into a separate registry:font
item so consumers can swap fonts independently.

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/apps/apollo-vertex/app/layout.tsx b/apps/apollo-vertex/app/layout.tsx
@@ -2,13 +2,19 @@ import { Head } from "nextra/components";
 import { getPageMap } from "nextra/page-map";
 import { Footer, Layout, Navbar } from "nextra-theme-docs";
 import "nextra-theme-docs/style.css";
+import { Inter } from "next/font/google";
 import Image from "next/image";
 import type { ReactNode } from "react";
 import "./globals.css";
 import { Analytics } from "@vercel/analytics/next";
 import { ThemeSwitcher } from "./components/theme-switcher";
 import { ThemeWrapper } from "./components/theme-wrapper";
 
+const fontSans = Inter({
+  subsets: ["latin"],
+  variable: "--font-sans",
+});
+
 export const metadata = {
   title: {
     default: "Apollo Vertex",
@@ -73,6 +79,7 @@ export default async function RootLayout({
     <html
       lang="en"
       dir="ltr"
+      className={fontSans.variable}
       // Suggested by `next-themes` package https://github.com/pacocoursey/next-themes#with-app
       suppressHydrationWarning
     >
diff --git a/apps/apollo-vertex/registry.json b/apps/apollo-vertex/registry.json
@@ -64,7 +64,10 @@
           "color-sidebar-accent": "var(--sidebar-accent)",
           "color-sidebar-accent-foreground": "var(--sidebar-accent-foreground)",
           "color-sidebar-border": "var(--sidebar-border)",
-          "color-sidebar-ring": "var(--sidebar-ring)"
+          "color-sidebar-ring": "var(--sidebar-ring)",
+          "font-sans": "var(--font-sans)",
+          "font-serif": "var(--font-serif)",
+          "font-mono": "var(--font-mono)"
         },
         "light": {
           "background": "oklch(1 0 89.8800)",
@@ -118,9 +121,6 @@
           "sidebar-accent-foreground": "oklch(0.1660 0.0283 203.3380)",
           "sidebar-border": "oklch(0.9237 0.0133 262.3780)",
           "sidebar-ring": "oklch(0.64 0.115 208)",
-          "font-sans": "Inter, ui-sans-serif, sans-serif, system-ui",
-          "font-serif": "IBM Plex Serif, ui-serif, serif",
-          "font-mono": "IBM Plex Mono, ui-monospace, monospace",
           "radius": "0.625rem",
           "shadow-x": "0",
           "shadow-y": "0px",
@@ -207,9 +207,6 @@
           "sidebar-accent-foreground": "oklch(0.9525 0.0110 225.9830)",
           "sidebar-border": "oklch(0.9525 0.0110 225.9830)",
           "sidebar-ring": "oklch(0.69 0.112 207)",
-          "font-sans": "Inter, ui-sans-serif, sans-serif, system-ui",
-          "font-serif": "IBM Plex Serif, ui-serif, serif",
-          "font-mono": "IBM Plex Mono, ui-monospace, monospace",
           "radius": "0.625rem",
           "shadow-x": "0",
           "shadow-y": "0px",
@@ -231,6 +228,20 @@
         }
       }
     },
+    {
+      "name": "font-inter",
+      "type": "registry:font",
+      "title": "Inter Font",
+      "description": "Inter font configuration for Apollo Vertex. Sets --font-sans CSS variable.",
+      "font": {
+        "family": "Inter",
+        "provider": "google",
+        "import": "Inter",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/inter"
+      }
+    },
     {
       "name": "accordion",
       "type": "registry:ui",
@@ -923,6 +934,7 @@
         "@mantine/hooks@^9.0.0"
       ],
       "registryDependencies": [
+        "font-inter",
         "button",
         "tooltip",
         "avatar",
