From 18d03f0a7a1861d4075bc3ac50a60118d1eae7c6 Mon Sep 17 00:00:00 2001 From: Rami Bitar Date: Sun, 10 May 2026 17:10:12 -0400 Subject: [PATCH] Fix font cascade for wrapped/nested heading elements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The body-font rule explicitly targeted span/a/p/li, which broke any heading rendered as (e.g. Typography variant="h3" as="span") or any heading containing inline span/anchor children — those elements matched the rule and reset their font to the body font, overriding inheritance from the parent heading. Set the body font once on `body` and let descendants inherit. Form controls (button/input/textarea/select) get `font-family: inherit` so they pick up the surrounding context instead of the UA default. Co-Authored-By: Claude Opus 4.7 --- components/ThemeProvider.tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/components/ThemeProvider.tsx b/components/ThemeProvider.tsx index 795a2ad..d5ce364 100644 --- a/components/ThemeProvider.tsx +++ b/components/ThemeProvider.tsx @@ -161,13 +161,20 @@ export function ThemeProvider({ ); // Plain CSS rules — applied directly, no Tailwind CDN runtime needed. - // Tailwind preflight resets h1..h6 to font-family: inherit, which would - // make headings pick up the body font. We override that here using the - // `--font-header` CSS var ThemeProvider sets per-page. + // Body font is set on `body` once and inherited by descendants (span, a, + // p, li, etc. don't need explicit rules — applying one to `span/a` would + // break heading children, anchors inside headings, and any element using + // `as="span"` to render a heading variant). + // Form controls have user-agent defaults, so they need an explicit override. + // Tailwind preflight resets h1..h6 to font-family: inherit, so we restore + // the heading font + weight here using the per-page CSS vars. const css = ` - body, p, span, a, li, button, input, textarea, select { + body { font-family: var(--font-body), system-ui, -apple-system, sans-serif; } + button, input, textarea, select { + font-family: inherit; + } h1, h2, h3, h4, h5, h6 { font-family: var(--font-header), system-ui, -apple-system, sans-serif; font-weight: var(--font-weight-header, 600);