Add font controls

Load it when it's needed

The engine is 1.8 MB over the wire. Load it when someone opens your font tool rather than with your first page, and import the package dynamically so it stays out of your main bundle.

const { createEngine } = await import("@typomat/engine");
const engine = await createEngine({ licenseKey });

Draw while they drag, compile when they pause

Outlines take about a millisecond a glyph, so draw them directly while a control is moving. A whole font takes about 90 ms, so compile that in a worker, and always let the newest change win.

import { createEngine } from "@typomat/engine";

const engine = await createEngine({ licenseKey });

self.onmessage = ({ data: { id, parameters, name } }) => {
  const ttf = engine.compile(parameters, { name });
  self.postMessage({ id, ttf }, [ttf.buffer]);
};

let latest = 0;
worker.onmessage = ({ data }) => {
  if (data.id !== latest) return;   // a newer change is on its way
  useFont(data.ttf);
};

slider.oninput = () => {
  drawPreview(engine.glyphs(parameters, word, { fitted: false }));
  clearTimeout(timer);
  timer = setTimeout(() => worker.postMessage({ id: ++latest, parameters, name }), 90);
};

Save the numbers, not the file

A font is about 14 KB, but its parameters are a line of JSON, and they'll draw the same letters whenever you ask. Store them on the customer's record, and compile when you need the file.

{ "weight": 118, "contrast": 0.92, "serif": 0.5, "xHeight": 470 }

Offer few controls

64 parameters are for you, not your users. Most products do better with three or four sliders, or a handful of starting points they can nudge. Pick ones that move the font a lot: weight, width, contrast, serif and xHeight go a long way.

Giving users their font

compile returns a complete file, so a download is one Blob away. Fonts your users make are theirs to use commercially: see Licensing.

const url = URL.createObjectURL(new Blob([ttf], { type: "font/ttf" }));

The dials from the app

The press-and-turn dials are part of the Full integration and White-label plans, adapted to your product rather than dropped in. How that works.