From d09e11f0a43fd61e094a357e489a9208c7a636cc Mon Sep 17 00:00:00 2001 From: Brenley Dueck Date: Wed, 12 Aug 2026 16:37:49 -0500 Subject: [PATCH] fix: use resolvable font stack in diagram SVGs Both diagrams requested `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif`. Inter is not bundled, and an SVG loaded through cannot use the site's webfonts, so resolution fell through to the system-font aliases: `ui-sans-serif` is not a supported generic in Firefox, and `-apple-system`/`BlinkMacSystemFont` point at the macOS system font, which Firefox has historically had trouble accessing. That produced garbled glyphs in the diagram labels in Firefox. Replace the aliases with real font files that exist on every platform. Rendering is unchanged where the old stack already worked -- the Firefox render of async-update-timeline.svg is byte-identical before and after. Co-Authored-By: Claude Opus 5 --- public/images/diagrams/async-update-timeline.svg | 2 +- public/images/diagrams/derived-state-effects-sequence.svg | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/public/images/diagrams/async-update-timeline.svg b/public/images/diagrams/async-update-timeline.svg index 81c24af30..3ca83eb77 100644 --- a/public/images/diagrams/async-update-timeline.svg +++ b/public/images/diagrams/async-update-timeline.svg @@ -14,7 +14,7 @@ diff --git a/public/images/diagrams/derived-state-effects-sequence.svg b/public/images/diagrams/derived-state-effects-sequence.svg index c7aaa3214..4e7b9c414 100644 --- a/public/images/diagrams/derived-state-effects-sequence.svg +++ b/public/images/diagrams/derived-state-effects-sequence.svg @@ -28,7 +28,7 @@