Onykia Docs

Fonts

The WASM compiler embeds the default font set. Additional fonts need to be loaded.

  • Eager - hand the engine the font up front using addFont / addFonts.
  • Lazy - register stubs so font names appear in autocomplete and let the engine pull the bytes on demand through your font ask handler.

Eager

addFont accepts a single TTF/OTF file (which may contain multiple faces); addFonts takes several at once.

const res = await fetch('/fonts/Inter.ttf');
await core.addFont(new Uint8Array(await res.arrayBuffer()));

After this the family is usable in the document.

Lazy

A FontStub describes a face without its bytes:

interface FontStub {
  family: string;   // shown in autocomplete
  key: string;      // id passed back to your `font` handler
  style?: 'normal' | 'italic' | 'oblique';
  weight?: number;  // OpenType 100..900 (400 regular, 700 bold)
  stretch?: number; // OpenType 1..9 (5 normal)
}

Register a font loader when constructing the engine. It receives the key from the stub the compiler decided it needs, and returns the bytes:

const core = new Core({
  wasm,
  font: async (key) => {
    const res = await fetch(`/fonts/${key}.otf`);
    if (!res.ok) throw new Error(`font fetch failed: ${key}`);
    return new Uint8Array(await res.arrayBuffer());
  },
});
 
await core.addFontStubs([
  { family: 'Inter', key: 'inter-regular', weight: 400 },
  { family: 'Inter', key: 'inter-bold',    weight: 700 },
  { family: 'Inter', key: 'inter-italic',  weight: 400, style: 'italic' },
]);

The bytes for inter-bold are only fetched the first time a document actually uses Inter at weight 700. The key is opaque to the engine - encode whatever your loader needs (a URL, a catalog id, a cache key).

Notes

addFontStubs can be called any time on a running engine - for example after the user uploads fonts manually.

The compiler wants raw SFNT bytes (TTF/OTF). If your source is woff2, decode it to SFNT before handing it over. The engine does not unpack web fonts itself.

On this page