@zappar/msdf-generator

A WebAssembly port of msdfgen for generating high-quality multi-channel signed distance field (MSDF) font atlases directly in the browser.

What is MSDF?

Multi-channel signed distance fields (MSDF) use all three color channels (RGB) to encode distance information, allowing sharp corners and fine details to be preserved much better than traditional single-channel signed distance fields. This makes them ideal for high-quality text rendering at any scale.

Live Demo

Try it out at msdf.zap.works

Installation

``bash
npm install @zappar/msdf-generator
`

Usage

`typescript
import {MSDF} from '@zappar/msdf-generator';

// Create instance (auto-detects worker/WASM paths)
const msdf = new MSDF();

// Initialize (loads worker and WASM)
await msdf.initialize();

// Load your font file
const req = await fetch('./Inter_28pt-Thin.ttf');
const ab = await req.arrayBuffer();
const fontBuffer = new Uint8Array(ab);

// Generate MSDF atlas
const result = await msdf.generate({
font: fontBuffer, // Font file data (required)
charset: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789', // Characters to include (required)
fontSize: 48, // Glyph rasterization resolution (higher = more detail in atlas)
textureSize: [512, 512], // Atlas container dimensions [width, height] for packing all glyphs
fieldRange: 4, // Max encoded distance in pixels (higher = smoother, lower = sharper/more precise)
fixOverlaps: true, // Fix overlapping contours in glyphs (B, P, R, etc.)
onProgress: (progress, completed, total) => {
console.log(${progress}%);
},
});

// result contains the font family data ready for @pmndrs/uikit:
// { 'Inter 28pt Thin': { 250: { pages, chars, info, common, distanceField, kernings } } }

// Clean up when done
await msdf.dispose();
`

$3

Generate multiple fonts sequentially:

`typescript
const result = await msdf.generate({
fonts: [
{font: robotoRegular},
{font: robotoBold, fixOverlaps: true},
{font: openSans, fontSize: 64, textureSize: [1024, 1024]},
],
charset: 'ABCabc123',
fontSize: 48,
onProgress: (progress, completed, total) => {
console.log(${progress}% (${completed}/${total}));
},
});

// Returns merged FontFamily
`

$3

To use with @react-three/uikit, simply pass the result into the fontFamilies prop.

`tsx



Hello World



`

Overlap Fixing

The fixOverlaps option fixes overlapping contours in glyphs like B, P, R, etc. This comparison shows the difference:

!Overlaps Comparison

Bundler Setup

$3

You can override the default paths:

`typescript
import {MSDF} from '@zappar/msdf-generator';
import workerUrl from '@zappar/msdf-generator/worker.js?worker&url';
import wasmUrl from '@zappar/msdf-generator/msdfgen_wasm.wasm?url';

const msdf = new MSDF({
workerUrl,
wasmUrl:,
});
``

Licenses

This package is MIT Licensed. However, it bundles the following third-party components, each with its own license:

- msdfgen - MIT License
- stb_truetype - Public Domain (MIT Licensed)
- Skia PathOps - BSD 3-Clause License