diff --git a/src/app/globals.css b/src/app/globals.css index aafa37ece..da1e6c7f6 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -91,7 +91,17 @@ body { background: var(--background); color: var(--foreground); - font-family: var(--font-sans), Arial, Helvetica, sans-serif; + /* The fallback chain is monospace on purpose. The body face *is* the + monospace (see docs/DESIGN-SYSTEM.md); falling back to Arial would have + rendered the whole site in a proportional face if the webfont ever failed. + It also mattered glyph by glyph: next/font subsets Space Mono to latin, + latin-ext and vietnamese, so a character outside those ranges — the arrows + in "Contact →" and "← Publications", the play triangle, the close cross — + was drawn from the first fallback that had it, which was Arial. A + proportional arrow sitting inside monospace text is the mismatch that made + the header look inconsistent. */ + font-family: var(--font-sans), ui-monospace, "Cascadia Mono", "Segoe UI Mono", + "DejaVu Sans Mono", Menlo, Consolas, monospace; -webkit-font-smoothing: antialiased; transition: background-color 0.2s ease, color 0.2s ease; } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a26e1bb5d..27bc7c145 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -20,6 +20,19 @@ const spaceMono = Space_Mono({ subsets: ["latin"], weight: ["400", "700"], style: ["normal", "italic"], + // next/font otherwise builds its metric-adjusted "Space Mono Fallback" face + // from Arial, which then supplies any glyph the latin subset leaves out — + // arrows, the play triangle, the close cross — in a proportional face inside + // monospace text. Naming a monospace fallback keeps those glyphs in kind. + fallback: [ + "ui-monospace", + "Cascadia Mono", + "Segoe UI Mono", + "DejaVu Sans Mono", + "Menlo", + "Consolas", + "monospace", + ], }); export const metadata: Metadata = { diff --git a/static-site/404.html b/static-site/404.html index 324c33ebb..ffa713f4e 100644 --- a/static-site/404.html +++ b/static-site/404.html @@ -1 +1 @@ -