frontend-shopify/react-editor-shopify
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix font cascade for wrapped/nested heading elements

Browse Source 
The body-font rule explicitly targeted span/a/p/li, which broke any
heading rendered as <span> (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 <noreply@anthropic.com>
This commit is contained in:
Rami Bitar
2026-05-10 17:10:12 -04:00
parent 3636724450
commit 18d03f0a7a
1 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/ThemeProvider.tsx
View File

@@ -161,13 +161,20 @@ export function ThemeProvider({
); );
// Plain CSS rules — applied directly, no Tailwind CDN runtime needed. // Plain CSS rules — applied directly, no Tailwind CDN runtime needed.
// Tailwind preflight resets h1..h6 to font-family: inherit, which would // Body font is set on `body` once and inherited by descendants (span, a,
// make headings pick up the body font. We override that here using the // p, li, etc. don't need explicit rules — applying one to `span/a` would
// `--font-header` CSS var ThemeProvider sets per-page. // 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 = ` const css = `
body, p, span, a, li, button, input, textarea, select { body {
font-family: var(--font-body), system-ui, -apple-system, sans-serif; font-family: var(--font-body), system-ui, -apple-system, sans-serif;
} }
button, input, textarea, select {
font-family: inherit;
}
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: var(--font-header), system-ui, -apple-system, sans-serif; font-family: var(--font-header), system-ui, -apple-system, sans-serif;
font-weight: var(--font-weight-header, 600); font-weight: var(--font-weight-header, 600);