Font Support

FontProvider (WebCanvas)

Note

FontProvider is currently in beta and is not included in the stable NPM release.

WebCanvas provides a FontProvider abstraction that lets you instantly use common font families without handling font binaries. By connecting to an external font backend, fonts can be loaded on demand with zero binary management.

Fontsource is included as the default provider, while a flexible API allows you to extend FontProvider to integrate your own backend seamlessly.

Usage

import { FontsourceProvider } from '@thorvg/webcanvas';

// Connect to own backend
TVG.Font.provider({
    fetch: async (name, options) => {
      const res = await fetch(`https://my-cdn.com/fonts/${name}.ttf`);
      return { data: new Uint8Array(await res.arrayBuffer()), type: 'ttf' };
    }
});

// Load from font provider
await TVG.Font.load('my-font');

// Reset to default provider
TVG.Font.provider(new FontsourceProvider());

Default Font

ThorVG Web adopts default font, enabling essential glyph rendering even in environments where no font is explicitly loaded.

Default Font Information

• DM Sans : https://fonts.google.com/specimen/DM+Sans
• LICENSE : https://fonts.google.com/specimen/DM+Sans/license
• Included Glyphs

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 +-=().

Default Font Embedding

A tool for embedding the default font into the WASM binary. Converts a TTF file into a C++ header with LZSS-compressed data.

• Source Code : font_to_hex.py

• Usage

# Extract glyphs (fonttools)
$ pyftsubset DMSans-Regular.ttf \
    --text="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 +-=()." \
    --output-file=DMSans-subset.ttf

# Convert to code
$ python3 font_to_hex.py <input.ttf> <output.h>

# Replace wasm/common/tvgWasmDefaultFont.h with the generated header data.