fix(og-image): load fonts via TTF files instead of @fontsource WOFF#167
Merged
Conversation
resvg-js uses fontdb (a Rust system font library) which only supports TTF/OTF. WOFF/WOFF2 are browser-only delivery formats and fontdb explicitly lists non-TTF support as a non-goal. Passing WOFF files via fontFiles silently fails — text renders as invisible in the generated PNG. Commit Inter v4.1 (Regular/Medium/SemiBold/Bold) and Newsreader Variable TTF files to src/fonts/ and point the plugin at those. The @fontsource packages remain in dependencies — they still serve WOFF2 to the browser via the CSS imports in astro.config.mjs. The TTF files are build-time only and are not included in the deployed site.
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.
Problem
The social preview image (
og-image.png) was generating with no text — just the background, accent bar, and footer dot. All text was invisible.The root cause is a format mismatch between the web and the build tool:
@fontsourcepackages ship WOFF/WOFF2 only — these are browser delivery formats, compressed wrappers around TTF data designed for efficient HTTP transfer. Browsers have built-in decoders for them.resvg-jsuses fontdb, a Rust system font library that only supports TTF/OTF. fontdb explicitly lists non-TTF support as a non-goal — it is a system-level renderer, not a browser, and the OS font system only uses TTF/OTF. Passing WOFF files tofontFilessilently fails with no error; text simply does not render.The original plugin code also passed fonts via a
fontBuffersoption that does not exist in the resvg-js 2.6.2 API (it was added later, and only for the Wasm build path). This meant fonts were never loaded at all.Fix
Commit Inter v4.1 (Regular/Medium/SemiBold/Bold, from rsms/inter) and Newsreader Variable (from google/fonts) as TTF files in
src/fonts/, and point the plugin'sfontFilesoption at those.The
@fontsourcepackages are untouched — they continue to serve WOFF2 to the browser via the CSS imports inastro.config.mjs. The TTF files are used exclusively at build time to render the PNG and are not included in the deployed site.Changes
src/fonts/— five TTF files committed (~1.6 MB total, build-time only)plugins/astro-agent-docs.mjs—fontFilesnow points atsrc/fonts/; removed the non-existentfontBuffersoption