Skip to content

Support local custom fonts#3

Open
i-am-the-slime wants to merge 2 commits into
betalyra:mainfrom
i-am-the-slime:custom-fonts
Open

Support local custom fonts#3
i-am-the-slime wants to merge 2 commits into
betalyra:mainfrom
i-am-the-slime:custom-fonts

Conversation

@i-am-the-slime
Copy link
Copy Markdown

Summary

  • Adds an Upload local font button to the font picker so users can bring their own .woff2 / .woff / .ttf / .otf files (e.g. the TX-02 from Berkeley Graphics) when none of the bundled fonts fit.
  • Uploaded fonts persist across reloads in localStorage (base64-encoded bytes) and appear in a new Custom group at the top of the picker with a per-row delete button.
  • Custom fonts flow through both render paths: registered with document.fonts for the live DOM preview, and surfaced via loadCodeFont so Satori uses the same bytes when exporting PNG/SVG.

Implementation notes

  • New src/lib/customFonts.ts holds the small store (one localStorage key, simple subscribe/notify), file-reader helpers, and a CSS-family helper.
  • src/lib/fonts.ts now treats the font name as a string and falls back to the custom store when the name isn't in the built-in REGISTRY. Its load-promise cache is invalidated whenever the custom-font store changes so re-uploads pick up the new bytes.
  • Settings.codeFont is widened from the CodeFont literal union to string. The union is still used as the key type of the built-in registry, so built-in fonts remain exhaustive.
  • FontCombobox grows a file <input>, a custom-fonts group, and a remove button.

Test plan

  • bunx tsc --noEmit clean
  • bun run build succeeds
  • Local dev: upload UI renders under the existing combobox; a persisted custom font shows up under Custom with a delete button, separated from Built-in below; selecting it updates Settings.codeFont.
  • Upload an actual .woff2 (e.g. TX-02) and confirm both the live preview and the exported PNG render it.

Add an "Upload local font" affordance to the font picker so users can
bring their own .woff2 / .woff / .ttf / .otf monospace fonts. Uploaded
fonts are persisted in localStorage as base64, registered with
document.fonts for the DOM preview, and surfaced through loadCodeFont
so Satori uses them on the PNG/SVG export path too.
@vercel
Copy link
Copy Markdown

vercel Bot commented May 15, 2026

@i-am-the-slime is attempting to deploy a commit to the betalyra Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant