Bundler Setup

Tegaki’s font bundles use the ESM import-attributes syntax to load their assets:

// inside tegaki/fonts/<family>/bundle.ts (and any bundle the generator produces)
import fontUrl from './<family>.ttf' with { type: 'url' };
import glyphData from './glyphData.json' with { type: 'json' };

Most bundlers handle this transparently. The note below covers Vite, where two optimizeDeps settings are needed for development to behave like production.

Vite

In dev mode, Vite’s pre-bundler (esbuild) processes Tegaki’s JS but does not propagate the with { type: 'url' } asset references — the runtime fetch for <family>.ttf then 404s from /node_modules/.vite/deps/. Excluding tegaki from pre-bundling routes the imports through Vite’s normal asset pipeline, where the URL transform works correctly.

Add to vite.config.ts:

import { defineConfig } from 'vite';

export default defineConfig({
  // ...
  optimizeDeps: {
    exclude: ['tegaki'],
  },
});

After changing this, fully restart the dev server (and consider deleting node_modules/.vite/deps/ once) so Vite re-runs its pre-bundling pass against the new config.

Production builds (Rollup) handle Tegaki out of the box; this only affects vite dev and vite preview.

Symptoms this fixes

Symptom in the browser	What’s happening	Fix
GET /node_modules/.vite/deps/<family>.ttf 404 plus NetworkError: A network error occurred from _loadFont	The .ttf import lost its asset reference during pre-bundling.	optimizeDeps.exclude: ['tegaki']

Other bundlers

Webpack, Rollup, Parcel, and esbuild’s standalone build mode all handle with { type: 'url' } natively in the configurations Tegaki has been tested with. Open an issue if you hit something — the maintainer welcomes bundler-specific notes here.