Free variable font instancer

Make a variable font smaller by fixing or narrowing its axes

Add a variable font, choose a fixed value or a narrower range for each axis, and watch the real file size change. Download the result as WOFF2 with @font-face CSS that matches the new weights.

Variable font instancer

Fix or narrow the axes.

Private by design · no file upload

1. Add your fonts

Up to 25 MB per file

Drop fonts here, or browse filesTTF, OTF, WOFF, WOFF2, and TTC collections · one file or a whole family

2. Choose an output format

3. Convert and download

Select a font to get started.

Advanced options· Subsetting, variable axes, line spacing and hinting, fallback fonts, font-display, snippets

Loading options…

CSS in the web font kitfont-displayAdd local() sourcesUses the font's full and PostScript names. Only helps visitors who have this exact font installed.Embed fonts in the CSS (base64)No separate font files. The CSS grows by about a third more than the fonts and can't be cached on its own.Font folderWhere the font files will live, relative to the CSS file.

CSS and code snippets

Add fonts to see the CSS.

Your CSS choices are saved in this browser.

How to instance a variable font

Add the variable font above. Its axes appear in the open Advanced options panel.
For each axis, keep the full range, narrow it to the values you use, or fix it at one value.
Check the preview. It shows the font with the values you chose.
Read the real size of the result, measured on the instanced file.
Convert, then download the WOFF2 file or the web font kit with matching CSS.

Why instance a variable font

Variable fonts carry extra data for every axis they can move along. A site that uses only a couple of weights downloads all of that data anyway. Fixing or narrowing the axes removes it, and system fonts with several axes can shrink to a fraction of their size.

Fonts you add here can be subset in the same pass, and the kit includes snippets for Next.js, Tailwind, and Astro.

Good to know

Instancing questions

What does instancing a variable font do?

A variable font stores every weight, width, or other style between its extremes. Instancing removes what you do not use: fixing an axis at one value makes a regular, static font, and narrowing an axis keeps only part of its range. Both make the file smaller.

Should I fix the weight or narrow it?

If your site only uses one weight of the font, fix it at that value. If it uses several, for example 400 for text and 700 for headings, narrow the weight axis to 400–700 and keep a single file.

Will the result look exactly like the preview?

Yes. The preview applies the same axis values with font-variation-settings, and the export is built by HarfBuzz from the same values. Where you narrow an axis whose default falls outside the new range, the default moves to the nearest end, and the preview shows that too.

How does the CSS change?

The font-weight in @font-face follows the weight axis: a fixed value becomes a single weight and a narrowed axis becomes a range. A width axis between 50% and 200% is written as font-stretch the same way.

Are my fonts uploaded?

No. Instancing runs in your browser with HarfBuzz. The fonts never leave your device.

Can I also subset the font?

Yes. Subsetting sits in the same panel. Turn it on to keep only the characters you need as well, and the size shown covers both.