feat: custom fonts via in-browser upload

[mioupa]

Addresses #64.

Why

Today, using any font outside typst.ts's default set means forking this repo, bundling the font, and self-hosting the add-in. This lets users add their own fonts directly in the task pane — no fork, no custom server.

How (overview)

• A collapsed Custom fonts panel lets the user upload font files (.ttf/.otf/.ttc). The bytes are fed straight to the Typst compiler.
• Fonts are applied via compiler.setFonts(...) rather than re-initializing the compiler: the base fonts (bundled math font + the cached text/cjk/emoji assets) are fetched once, and on each change a font resolver is rebuilt from those in-memory bytes plus the user fonts. No WASM re-init and no re-download. User fonts are ordered before the cjk/emoji assets so they keep fallback priority.
• The OpenType name table is parsed to detect the family/subfamily, so the UI shows what to type in #set text(font: "...") and multiple weights of one family (e.g. Regular + Bold) coexist instead of overwriting each other.
• Fonts are persisted in IndexedDB (a separate layer from the existing asset cache) so they survive a task-pane reload; they're loaded before the first compile.
• The panel is closed by default and does not touch the insert/update flow.

Tests

Playwright coverage (compiler mocked): adding a font, keeping multiple weights as separate faces, removing a font, and persistence across a reload. Uses a tiny synthetic test font generated in-memory (a minimal sfnt with just a name table), so no large binary fixture is committed.

Notes / decisions

• System fonts (preloadSystemFonts / queryLocalFonts) are intentionally left out: the API is Chromium-only (won't work in WKWebView on macOS PowerPoint) and prompts for permission.
• URL-loaded fonts (#600) are excluded from this PR as discussed; prototyped separately on feat/custom-font-url.
• Portable editing: presentations stay viewable everywhere (the SVG is embedded); only re-editing needs the font. Embedding the raw bytes into the presentation via PowerPoint.Presentation.customXmlParts looks feasible as a future opt-in if desired.

🤖 Generated with Claude Code

[coderabbitai]

Actionable comments posted: 5

🧹 Nitpick comments (1)

web/src/typst.ts (1)

110-114: ⚡ Quick win

Clarify comment to include "text" assets for precision.

The comment states user fonts are inserted before "CJK/emoji assets," but line 106 fetches ["text", "cjk", "emoji"] assets. User fonts are ordered before all three asset categories (text, CJK, emoji), not just CJK and emoji.

📝 Suggested comment update

 /**
  * Builds a font resolver containing the base fonts plus the user fonts and sets
- * it on the compiler. User fonts are inserted before the CJK/emoji assets so
- * they win font fallback (matching the previous `loadFonts()` ordering).
+ * it on the compiler. User fonts are inserted before the default text/CJK/emoji
+ * assets so they win font fallback (matching the previous `loadFonts()` ordering).
  */

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/src/typst.ts` around lines 110 - 114, Update the comment above the font
resolver logic to explicitly state that user fonts are inserted before the
"text" assets as well as the "cjk" and "emoji" assets: reference the asset order
["text", "cjk", "emoji"] fetched earlier and say user fonts win font fallback
ahead of text/CJK/emoji, matching the previous loadFonts() ordering; mention
this applies to the font resolver set on the compiler so readers know which
component is affected.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@tests/pages/powerpoint-page.ts`:
- Around line 238-248: The assertions in expectFontFamilyCount and
expectFontStyleListed use substring matching via hasText and can match
unintended values; update the locator calls for ".fonts-item-family" and
".fonts-item-style" to use exact text matching (e.g., change hasText: family to
hasText: { exact: family } and hasText: style to hasText: { exact: style }) so
the tests only pass on exact matches.

In `@web/src/font-ui.ts`:
- Around line 32-34: The event handlers and fire-and-forget calls currently use
"void" (e.g., input.addEventListener -> void handleFilesSelected(...),
handleRemove(...)) so rejections from async helpers like reloadCompilerFonts()
and updatePreview() may become unhandled; update those call sites (the listener
invoking handleFilesSelected, places calling reloadCompilerFonts and
updatePreview, and the handler invoking handleRemove) to await the promise or
attach a .catch() handler that logs the error and surfaces user feedback/state
rollback (e.g., update status UI and clear any stale loading flags).
Specifically, wrap calls to handleFilesSelected and handleRemove with try/catch
or add .catch(...) and ensure reloadCompilerFonts() and updatePreview() failures
are caught and handled so the UI state is consistent.
- Around line 53-67: The current try/catch around the whole loop causes one bad
file to abort post-processing and skip reloadCompilerFonts, renderFontsList,
updatePreview, and final setStatus; move error handling inside the loop so each
call to addFontFromFile(file) is wrapped in its own try/catch, push successful
font.key into the added array and record failed filenames/errors into a separate
failures list, then after the loop always call reloadCompilerFonts(),
renderFontsList(), await updatePreview(), and call setStatus with a message that
reports both added.join(", ") and any failures so the registry/compiler/UI stay
in sync even if some files fail.

In `@web/src/registry/font-name.ts`:
- Around line 173-181: The isEnglish function incorrectly treats
unknown/non-Windows/non-Mac platform IDs as English by returning true; change
its logic so that only explicit English indicators are considered English (i.e.,
return false for unrecognized platformId values). Update the
isEnglish(platformId, languageId) function to return true only for the known
English cases (platformId === 3 with languageId 0x0409, and platformId === 1
with languageId === 0) and return false for all other platformId values so
preferEnglish won't prematurely choose an unknown/Unicode record.

In `@web/src/registry/user-fonts.ts`:
- Around line 107-127: The loadStoredFonts function opens an IndexedDB
connection with openDb() but only calls db.close() on the success path; move DB
closing into a finally block so the connection is always closed on success or
error. Refactor loadStoredFonts to declare a let db variable before try, assign
it from await openDb(), remove the inline db.close() inside the try, and in
finally do if (db) db.close(); apply the same pattern to other DB helpers in
this file that use openDb()/awaitRequest()/STORE_NAME (e.g., any
save/delete/read functions) so every code path closes the IDBDatabase.

---

Nitpick comments:
In `@web/src/typst.ts`:
- Around line 110-114: Update the comment above the font resolver logic to
explicitly state that user fonts are inserted before the "text" assets as well
as the "cjk" and "emoji" assets: reference the asset order ["text", "cjk",
"emoji"] fetched earlier and say user fonts win font fallback ahead of
text/CJK/emoji, matching the previous loadFonts() ordering; mention this applies
to the font resolver set on the compiler so readers know which component is
affected.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: d915e94b-6166-4692-b581-2affc96038ec

📥 Commits

Reviewing files that changed from the base of the PR and between 4373d2d and 771896a.

📒 Files selected for processing (14)

• tests/_support/browser-mocks/typst-options.ts
• tests/_support/browser-mocks/typst.ts
• tests/_support/font-fixture.ts
• tests/fonts.spec.ts
• tests/pages/powerpoint-page.ts
• web/powerpoint.html
• web/src/constants.ts
• web/src/font-ui.ts
• web/src/main.ts
• web/src/registry/font-cache.ts
• web/src/registry/font-name.ts
• web/src/registry/user-fonts.ts
• web/src/typst.ts
• web/styles/main.css

[Splines]

Thanks for your PR and sorry for my late review. In principle, it works really nice, I've tried it out with some font files.

Here are some comments, with my biggest concern being the font parsing.

[Splines]

I'm not feeling too well having custom parsing of fonts inside this project as I'm unaware of their internals and files like these seem hard to maintain without that domain knowledge. Isn't there a nice JS API for that already? Or a small and well-maintained npm package? This seems like too low-level logic for a plugin to me.

[Splines]

Please outsource fonts-panel styles to a new CSS file.

[Splines]

The fonts panel should have a small vertical spacing to the Global preamble panel above.

[Splines]

This is only shown when accidentally hovering of the title of the font. Instead, what about showing this as text such that the user can actually copy it as well?

[Splines]

• There should be a confirmation dialog such that users don't acidentally delete their added fonts.
• Furthermore, the X button is not vertically centered right now making it look weird.
• And the contrast of the white X to the red hover color in dark mode is not high enough I think.

[Splines]

We should indicate which font formats are actually supported and where it is limited. Maybe also with a link to the Typst documentation.

[Splines]

I think we should add a small section explaining briefly (via a hint icon tooltip) how this works, e.g. that we store the actual font in a database in the local browser (that the plugin runs in).