From 2e97e91852f0cd5cc2d20b02933a621f910b9114 Mon Sep 17 00:00:00 2001 From: Cameron Pfiffer Date: Mon, 27 Jul 2026 00:34:21 -0700 Subject: [PATCH] Prevent custom font reload flicker. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Preload Around and cache versioned font assets immutably so page navigation does not repaint headings after redundant font fetches. 👾 Generated with [Letta Code](https://letta.com) Co-Authored-By: Letta Code --- docs/around-typeface.md | 9 +++++++-- src/components/shell.tsx | 2 ++ src/index.tsx | 9 +++++++++ 3 files changed, 18 insertions(+), 2 deletions(-) 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; 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({ {pageTitle} + 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" })); -- 2.51.2