claude code vibe fix(export): render Monocraft font in minecraft mode PNG export#316
Open
functionstackx wants to merge 1 commit intomasterfrom
Open
claude code vibe fix(export): render Monocraft font in minecraft mode PNG export#316functionstackx wants to merge 1 commit intomasterfrom
functionstackx wants to merge 1 commit intomasterfrom
Conversation
Drop the manual `fontEmbedCSS` and the `getFontEmbedCSS()` helper so
html-to-image's built-in `getWebFontCSS` runs instead. The previous code
raw-dumped every `@font-face` rule from `document.styleSheets`, but those
rules contain stylesheet-relative font URLs (e.g.
`url("../media/Monocraft-...woff2")`) that can't resolve once embedded
inside an SVG data URL. The browser silently fell back to Arial — which
in minecraft mode replaced the pixel-perfect Monocraft with regular
sans-serif Arial, exactly the bug in #282.
`getWebFontCSS` walks the cloned subtree, resolves each font URL against
its parent stylesheet's href, and inlines the woff2 as a data URL — so
Monocraft renders correctly in the exported PNG.
Fixes #282
Co-authored-by: functionstackx <functionstackx@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #282.
Root cause
useChartExport.tspre-suppliedfontEmbedCSStohtml-to-imageby raw-dumping every@font-facerule fromdocument.styleSheets. Those rules contain stylesheet-relative font URLs (e.g.url("../media/Monocraft-...woff2")) that can't resolve once embedded inside an SVG data URL. The browser silently fell back to Arial — which in minecraft mode replaced Monocraft with sans-serif Arial, exactly the bug reported.Fix
Drop the manual
fontEmbedCSSand the now-unusedgetFontEmbedCSS()helper, lettinghtml-to-image's built-ingetWebFontCSSresolve each font URL against its parent stylesheet'shrefand inline the woff2 as a data URL.Verification
pnpm typecheck✅pnpm lint✅packages/appunit tests: 1731/1731 passGenerated with Claude Code