[fontless] support fonts in npm packages like `@fontsource/xxx`

[dominikg]

🆒 Your use case

I prefer builds to be reproducible/hermetic/isolated. So downloading a font file into a local cache each time is a non-starter.

I looked at the providers in unifont but all of them seem to download always.

🆕 The solution you'd like

Implement an npm provider that looks up font names on known npm orgs, adding them as devDependencies to the project and then mapping to the files in those packages instead of a local cache populated by downloading/copying.

🔍 Alternatives you've considered

not using this

ℹ️ Additional info

No response

[saturnonearth]

I agree that reproducible/hermetic/isolate is super important when it comes to fonts, you don't want to push to prod and have fonts come out differently based on what is being downloaded - it needs to be deterministic .

[danielroe]

One option might be for unifont to expose a static snapshot of the API from each provider, and provide an option to use this rather than download a fresh copy.

We could also or alternatively add a provider in unifont that first attempts to resolve fonts from any locally-installed packages, before then looking up fonts from other providers.

[dominikg]

i like the npm provider more, esp. jf there is a "local only" mode. i basically never want it to download while building. using npm also ensures that setups behind registry proxies work, or multi-stage docker where the font is then automatically part of the module caching layer.

[hi-ogawa]

If you have some fonts from @fontsource/xxx installed, it's already local font, so basically if you just follow their setup https://fontsource.org/docs/getting-started/install and then directly use fontaine plugin (not fontless), it will generate fallback font for that. I'm wondering what's the benefit to use fontless for this scenario.

[dominikg]

automatic discovery/mapping/convenience over manually having to figure out the font file path in node_modules.

[hi-ogawa]

I'm not sure there's much to figure out though. For fontsource, isn't it either just import "@fontsource/open-sans" in js or @import "@fontsource/open-sans" in css? like in https://fontsource.org/docs/getting-started/install

[dominikg]

its not about the css (which you might want to customize anyways because many fontsource font css include too much), more about vite config. Setting up fontless with npm provider is less work and gives you access to all fonts on that provider where you'd have to deal with it yourself otherwise.