[Feature]: Embedded Fonts Should Only Include Necessary Data For Used Character Set

tldraw / tldraw

SDK for creating whiteboards and canvas experiences on the web.

https://tldraw.dev

Other

35.13k stars 2.12k forks source link

[Feature]: Embedded Fonts Should Only Include Necessary Data For Used Character Set #4145

Open seflless opened 1 month ago

seflless commented 1 month ago

What's the feature?

Tldraw currently embeds the entire font for each referenced in exported file. The files can become quite large because of this.

Eg. this simple Tldraw test file that uses all 4 built in fonts, generates a >400K svg file

The original .tldr file is 4KB
Exported SVG file is 442KB

Notes

I did a lot of explorations around improving SVG generation in Tldraw in 2022.
I became busy and stopped the work.
Here's a PR with a lot of messages of my progress: https://github.com/tldraw/tldraw/pull/561.
- It includes references to prototypes of font sub-setting and a Twitter threads reporting my findings/progress.
- I'd recommend reading through it

Contact Details

francoislaberge@gmail.com

Code of Conduct

[X] I agree to follow this project's Code of Conduct

linear[bot] commented 1 month ago

TLD-2629 [Feature]: Embedded Fonts Should Only Include Necessary Data For Used Character Set

seflless commented 1 month ago

I did a quick test today using the subset-font package and it worked out of the gate. But it uses harfbuzzjs, which has a >500K .wasm file. This is a large dependency. Here's the test repo

I'm assuming ideally you'd want something built in that can run client side, perhaps it should be first built as an extra dependency people can opt-into for Tldraw?

seflless commented 1 month ago

The reduction in size was pretty dramatic.

The font went from 153KB to 4KB. My exported SVG file went from 209KB to 10KB.

mimecuvalo commented 1 month ago

I did a quick test today using the subset-font package and it worked out of the gate. But it uses harfbuzzjs, which has a >500K .wasm file. This is a large dependency. Here's the test repo

That's super neat. But yeah, that dependency size is prohibitively large :-/ I think you're right that it's something that should be opt-ed into. We're formulating slowly a plan on how to be able to opt into things in a generalized way so this type of behavior could also be something that fits in with that strategy.