Typomat Engine · Preview widgets
See the font
before you make it.
One script and one tag show a parameter set live on your own page, drawn in your visitor's browser. Every parameter, all 271 characters, free on every plan.
These sliders are this page's, as yours would be. Each change sets preview.parameters on both widgets: the mini one beside them, and the full one with the exact body the Font API would get. A style sets one of the engine's style parameters, which the preview draws like any other.
Heading font
style
Preview first.
Compile once.
The widget draws, and the API makes the file. Decide with one, deliver with the other.
- Before you send it
- API users see what their numbers draw before a call counts. The full widget shows the exact request body, ready to copy.
- Your tool's preview
- Building a font tool on the API? Put the widget beside your own controls, in your colours, as the preview your customers see.
- Free on every plan
- It's drawn in the visitor's browser, never by the API, so a preview costs you no fonts.
Your colours.
Your corners.
Background, ink, accent, label font, radius and padding, in light, dark or the visitor's own setting.
Dark
mode="dark" with the host's own colours. auto follows the visitor's system. The specimen is squared, a style parameter.
Compact, high contrast
No corners, little padding, black on white and a monospaced label font. The specimen is squared and mono, two style parameters, on a serif.
Your pieces.
In your order.
show lists what the widget shows, top to bottom: line, waterfall, grid, paragraph, parameters, request. With editable, visitors type their own words and see them in the font at once.
Try it: type in the line or the paragraph. What you type stays in the widget, and never reaches this page.
show="line paragraph" editable="line paragraph" controls="size theme" placeholder="Type here"
show="line waterfall" sizes="12 18 28 44 68"
show="grid" groups="figures"
show="paragraph" editable="paragraph" lines="6" align="center"
One script.
One tag.
The script goes on the page once, and a tag wherever a preview belongs. It needs no key and no account.
<script src="https://engine.typomat.app/typomat/widget.js" async></script>
<typomat-preview
variant="mini"
text="Acme Studio"
parameters='{"weight":120,"contrast":0.4,"serif":0.6}'
accent="#E22400">
</typomat-preview>const preview = document.querySelector("typomat-preview");
slider.addEventListener("input", () => {
preview.parameters = { weight: Number(slider.value), contrast: 0.4 };
});
preview.addEventListener("typomat-status", (event) => {
console.log(event.detail.unknown); // ["boldness"]
});- show
- The pieces, top to bottom: line, waterfall, grid, paragraph, parameters, request
- variant
- Two presets: mini (a line) or full (line, grid, paragraph, parameters). show wins when given
- editable, placeholder
- Let visitors type into the line or the paragraph. What they type never leaves the widget
- controls
- size and theme: a size slider and a light/dark switch for the visitor
- parameters
- JSON, or one attribute each: param-weight="120". Or set el.parameters in script
- Theme
- mode, background, ink, accent, muted, font, radius, padding, or a theme JSON object
It shows.
It never sends.
Values flow from your page into the widget, and nothing flows back: no parameters, no typed text, no font.
- No font file
- It runs the engine's preview edition, built without its font writers. It can't make a font, even when asked.
- Typed text stays put
- Visitors' words are drawn in the widget and go nowhere else: not to your page, not to a server.
- No key to leak
- It needs no licence key, so there's nothing secret in your page's code.
- Every parameter
- All 95 parameters and 271 characters, with the same outlines as the full engine.
- Loads when it's needed
- The engine is 1.89 MB with Brotli, fetched as a widget nears the screen, then kept by the browser for a day.
- Powered by Typomat
- Shown on every plan but White-label, in Typomat's own display font, whatever your theme.
Good to know
Show it on your page.
A script and a tag, free on every plan. The docs have every attribute and the theme.