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

creilly11235 · claude · KokoMilev · commit d5a19bf42140 · 2026-04-10T11:53:34.000+02: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/.github/workflows/apollo-vertex-lint.yml b/.github/workflows/apollo-vertex-lint.yml
@@ -7,6 +7,10 @@ on:
       - "apps/apollo-vertex/**"
       - ".github/workflows/apollo-vertex-lint.yml"
 
+env:
+  GH_NPM_REGISTRY_TOKEN: ${{ secrets.GH_NPM_REGISTRY_TOKEN }}
+  NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+
 concurrency:
   group: vertex-lint-${{ github.ref }}
   cancel-in-progress: true
diff --git a/.github/workflows/commit-lint.yml b/.github/workflows/commit-lint.yml
@@ -4,6 +4,10 @@ on:
   pull_request:
     types: [opened, edited, synchronize, reopened]
 
+env:
+  GH_NPM_REGISTRY_TOKEN: ${{ secrets.GH_NPM_REGISTRY_TOKEN }}
+  NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+
 jobs:
   commitlint:
     name: Validate Commit Messages
diff --git a/apps/apollo-vertex/app/layout.tsx b/apps/apollo-vertex/app/layout.tsx
@@ -1,14 +1,21 @@
+import { Inter } from "next/font/google";
+import Image from "next/image";
 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 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",
+  display: "swap",
+});
+
 export const metadata = {
   title: {
     default: "Apollo Vertex",
@@ -73,6 +80,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
@@ -9,6 +9,7 @@
       "title": "Apollo Vertex Theme",
       "description": "Apollo Vertex design system tokens — colors, typography, spacing, shadows, and easing functions with light and dark mode support.",
       "dependencies": ["tw-animate-css"],
+      "registryDependencies": ["font-inter"],
       "cssVars": {
         "theme": {
           "radius-sm": "calc(var(--radius) - 4px)",
@@ -64,7 +65,8 @@
           "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)"
         },
         "light": {
           "background": "oklch(1 0 89.8800)",
@@ -118,9 +120,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 +206,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 +227,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",
