diff --git a/docs/around-typeface.md b/docs/around-typeface.md
index bd6fce9..a022114 100644
--- a/docs/around-typeface.md
+++ b/docs/around-typeface.md
@@ -19,6 +19,8 @@ FontLab, Glyphs, Illustrator, or private source file exists elsewhere.
 | `src/components/type-specimen.tsx` | Public `/type` specimen and design statement |
 | `public/type.css` | Specimen composition and responsive behavior |
 | `public/site.css` | Site-wide `@font-face`, display-font integration, and font cache key |
+| `src/components/shell.tsx` | Shared WOFF2 preload and its matching cache key |
+| `src/index.tsx` | Immutable font response policy |
 
 The Python generator is the editable source. The TTF and WOFF2 files are build
 artifacts and should never be edited directly.
@@ -39,8 +41,11 @@ is explicitly supplied by the caller. Rebuilding unchanged source should
 therefore leave the committed font binaries unchanged.
 
 After a real font change, increment the cache query attached to both font URLs
-in `public/site.css`. Browsers can otherwise retain an older WOFF2 while the
-server is already serving the new one.
+in `public/site.css` and the matching WOFF2 preload in
+`src/components/shell.tsx`. Font responses are cached for one year with
+`immutable`, so changing the query is what makes browsers request a new binary.
+Browsers can otherwise retain an older WOFF2 while the server is already
+serving the new one.
 
 ## Design grammar
 
diff --git a/src/components/shell.tsx b/src/components/shell.tsx
index 7575f70..c4519bd 100644
--- a/src/components/shell.tsx
+++ b/src/components/shell.tsx
@@ -5,6 +5,7 @@ export type ShellChild =
   | Promise<import("hono/utils/html").HtmlEscapedString>;
 
 const themeInitScript = `(function(){var t=localStorage.getItem("theme");if(t==="dark"||t==="light")document.documentElement.setAttribute("data-theme",t)})()`;
+const aroundFontUrl = "/public/fonts/around-regular.woff2?v=20260712-12";
 
 export function Shell({
   children,
@@ -33,6 +34,7 @@ export function Shell({
         <title>{pageTitle}</title>
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
+        <link rel="preload" href={aroundFontUrl} as="font" type="font/woff2" crossorigin="anonymous" />
         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" />
         <link rel="stylesheet" href="/public/host-primitives.css" />
         <link rel="stylesheet" href="/public/host-theme.css" />
diff --git a/src/index.tsx b/src/index.tsx
index 5635d43..4758ed8 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -40,6 +40,15 @@ import {
 const app = new Hono();
 
 // --- Static files ---
+app.use(
+  "/public/fonts/*",
+  serveStatic({
+    root: "./",
+    onFound: (_path, c) => {
+      c.header("Cache-Control", "public, max-age=31536000, immutable");
+    },
+  })
+);
 app.use("/public/*", serveStatic({ root: "./" }));
 app.use("/assets/*", serveStatic({ root: "./public" }));