Use custom math font other than default "New Computer Modern Math"

[yjcui]

First thanks a lot for this great add-in!

Wondering if it's possible to use custom font other than the default one, which I assume to be "New Computer Modern Math"?

Tried #show math.equation: set text(font: "Cambria Math") without checking 'Only Math' option, but it was not taken.

[Splines]

The math font is stored here and I guess it's "New Computer Modern Math", yes (I left it in from this project that served as initial version). I import the font here, and you'd have to add custom fonts to this line.

Maybe in the UI, we could offer another file picker where you can choose your own font to use. But you'd have to point to a a local .ttf file. And I'd like to keep the plugin simple... Maybe we can also just add a few more fonts to choose from, e.g. the 4 default ones presented here. Related: this Typst forum post.

[yjcui]

Thanks for the info! Option to being able to use a local .ttf file seems convenient for users. I am good with the existing font, but just wondering about the flexibility.

Besides, if you plan to have a fixed set of fonts, I would suggest to include at least one 'Sans Serif' math font (Latin/New computer modern sans variant, Linux Libertine sans variant, e.g.) as Sans Serif font is more common for slides. Just for overall consistency purpose.

Also here is a list of some free math fonts for your reference, in case you were not aware of (I personally always have Termes and Pagella installed on my computer☺): https://www.gust.org.pl/projects/e-foundry/tg-math

[munechika-koyo]

Sorry for interrupting.
I am also wondering how to specify the system-installed font.
I tried the following workaround by putting the font file under public/ directory, but it didn't change anything:

// @ts-expect-error ?url import
import mathFontUrl from "/STIXTwoMath.otf";

I'd like to use the stix two math font.

Did I miss anything to configure?

[Splines]

@munechika-koyo Hey, you're not missing anything, custom fonts are just not supported at the moment ;)

[munechika-koyo]

I found out that I need to configure typst for math font like:
#show math.equation: set text(font: "STIX Two Math") in the preamble, in addition to the above.

[Splines]

@mioupa, I've seen you already added some custom fonts in your fork. I was wondering if we can get this somehow to work holistically without too much effort and in a general way, i.e. such that users can use custom fonts without having to fork this repo and run their own web server.

Does somebody know how Typst itself does it? Does it come with bundled fonts, does it cache them, download them from somewhere? Which fonts are bundled, which not? Note that I already implemented a small font cache, inspired by cached-font-middleware.cts from typst.ts, so with this setting custom fonts in the preamble already works? I will have to dig a bit deeper here, so if someone has some pointers, that'd be appreciated.

[mioupa]

@Splines, thanks for the ping! I dug into this a bit and have a working prototype.

How Typst/typst.ts sources fonts (what I found)

typst.ts doesn't magically find system fonts — for the WASM build you have to hand the compiler the actual font bytes before build, via loadFonts([...]) / preloadFontAssets(...) in beforeBuild. The "default" set comes from preloadFontAssets({ assets: ['text','cjk','emoji'] }), which downloads Typst's bundled fonts (New Computer Modern, Libertinus, DejaVu Sans Mono, Noto Serif CJK SC, emoji, …) from jsDelivr mirroring typst/typst-assets + typst/typst-dev-assets. Your font cache (the cached-font-middleware.cts-inspired one) caches exactly those remote assets — so it speeds up the defaults, but it isn't a path for arbitrary user fonts.

So today, using a font that isn't in that bundled set means forking + bundling + self-hosting (which is what I ended up doing on my fork).

Proposed approach: let users add fonts at runtime, in the browser

Instead of bundling, the task pane lets the user upload font files (.ttf/.otf/.ttc). The bytes are fed straight into loadFonts([...]), so no fork and no custom server is needed. Concretely:

• Read the OpenType name table to detect the family + subfamily, so the UI shows exactly what to type in #set text(font: "..."), and multiple weights of the same family (e.g. Regular + Bold) coexist instead of overwriting each other.
• Persist the uploaded bytes in IndexedDB so they survive a task-pane reload (loaded before the first compile). This is a separate layer from your asset cache: yours caches remote default fonts, this stores user-provided fonts.
• Re-init the compiler when fonts change, with a live preview refresh.

Branch (off current main): https://github.com/mioupa/pptypst/tree/feat/custom-font-upload

Questions before I open a PR — would value your opinion:

1. Re-init vs compiler.setFonts(...): I currently re-init the compiler on font change for simplicity. Happy to switch to building a TypstFontResolver and setFonts if you prefer.
2. System fonts: preloadSystemFonts / queryLocalFonts() exists, but it's Chromium-only (won't work in WKWebView on macOS PowerPoint), so I left it out. Worth gating behind a capability check, or skip entirely?
3. Anything you'd want aligned with the existing font-cache design?

Thanks for the great project!

[Splines]

@mioupa Thanks a lot for your efforts and for clarifying some things.

Your plans

1. If this doesn't imply a completely over-engineered solution, I would prefer not having to re-init the whole compiler and instead using compiler.setFonts(...) instead.
2. Regarding preloadSystemFonts: would this imply that all my system fonts are somehow loaded at once? Or is it just that the metadata is loaded and only once I declare via #set text(font: "..."), the actual font raw data as bytes is fetched?

Other than that, the plan sounds good.

Related

This issue might be related: Myriad-Dreamin/typst.ts#600, especially, it might be worth discussing if we want to also allow just pasting a remote link and use preloadRemoteFonts().

In addition to that, note from the Typst docs:

Locally, Typst uses your installed system fonts or embedded fonts in the CLI, which are Libertinus Serif, New Computer Modern, New Computer Modern Math, and DejaVu Sans Mono.

But good to hear that these fonts are already in the "default" set loaded by typst.ts.

Concerns

One concern with this custom font handling is that this makes PowerPoint presentations system-dependent. They can still be shown on every device as we just embed the SVG in the presentation. However, you can no longer update formulas with PPTypst on any device, only on those that have the correct font installed. Not sure if there's an easy way around this and that's why I'm currently still a bit reluctant. Maybe we could embed the raw font bytes into the PowerPoint presentation itself, but this sounds a bit overkill.

UI

In my opinion, this feature should be presented in a very subtle way as it will probably not be used by the majority of people. And even if you use it, you will only need its UI only for a few times to upload your font files and that's it. This should not at all complicate any of the existing process of inserting/updating equations.

[mioupa]

Thanks for the detailed feedback — I've addressed the points.

setFonts instead of re-init — Done. setFonts(resolver) replaces the whole font set, so I keep the base fonts (bundled math font + the cached text/cjk/emoji assets) in memory and, on each change, rebuild a resolver from those bytes + the user fonts and call compiler.setFonts(...). No WASM re-init and no re-download — just a cheap resolver rebuild. User fonts are ordered before the cjk/emoji assets so they keep fallback priority.

preloadSystemFonts — Neither of your two guesses exactly: it enumerates the metadata of all local fonts via queryLocalFonts(), but eagerly reads the full bytes only for the families listed in byFamily (empty list loads nothing); it's not lazy on #set text(font: ...). It also needs the Chromium-only Local Font Access API (won't work in WKWebView on macOS PowerPoint) and prompts for permission, so I've left it out for now.

Remote URL / #600 — Prototyped on a separate branch: a field to paste a direct font-file URL (.ttf/.otf) on a CORS-enabled host (e.g. GitHub via jsDelivr/raw). A Google Fonts CSS link won't work, since it's CSS rather than a font file.

System-dependent presentations — The default stays local-only (IndexedDB), so anyone not using custom fonts is unaffected, and the embedded SVG always renders everywhere — only re-editing needs the font. If we ever want portable editing, embedding looks feasible: PowerPoint.Presentation.customXmlParts (PowerPointApi 1.7) can store each used font once per presentation (base64) and load it on open via setFonts. Given that CJK fonts are several MB, making it opt-in could be one way to keep file sizes sane. (PowerPoint's built-in "embed fonts" can't be used here — the add-in can't read those bytes.)

UI — Behind a collapsed Custom fonts panel (closed by default, below the preamble); it doesn't touch the insert/update flow at all.

Branches:

• setFonts core: https://github.com/mioupa/pptypst/tree/feat/custom-font-upload
• • URL paste: https://github.com/mioupa/pptypst/tree/feat/custom-font-url

Let me know what you think.

[Splines]

Hey @mioupa, nice thanks. Could you please open a PR for the core functionality (without the URL-loaded fonts for now)? This way, I can give a review (but probably only at the end of this week or even next week).

Please make sure to summarize the why in the PR description and give an overview over the how (although not too detailed as the code should speak for itself). Please also add Playwright tests for this new feature, maybe with some test font (should be small in size). Thanks.