You'll need: FontCreator (Windows or macOS) and two finished, compatible static fonts from the same family — for example a Regular and a Bold.

A variable font is a single file containing one or more axes (for example weight or width) that let you use a continuous range of style variations through interpolation. This tutorial shows how to build a variable font in FontCreator's font editor out of two existing non-variable fonts, preview the interpolation, fix compatibility, and export named instances. It also doubles as the hub for the rest of the variable-font tutorials — see the map at the end.

The concept of variable fonts has been around for decades, but it was only adopted by the OpenType specification in 2016. FontCreator can export a variable font, and it can also export every pre-defined style (named instance) with a single click, so you can make fonts faster.

We assume you already made a Regular and Bold version of a font family. To get started, open them both in FontCreator.

Weight Axis

Since we're combining two fonts with different weights, we need a Weight axis.

1. Activate the Regular style.
2. Open the Font Properties panel.
3. Go to the Axes tab.
4. Click the [+] toolbar icon and select Weight.

Bold Master

Within the Font Properties panel, select the Masters tab. Click the [+] toolbar icon and choose the Bold font. This copies all glyph outlines from the Bold font into this one as a second master.

Now update the Axis Location for both masters. Select the Regular master and set the location to 400. Select the Bold master and set it to 700.

At this point you already have a variable font. Well done.

> Note: You'll probably notice several glyphs in the Font Overview panel suddenly show a red background header. That flags glyphs with compatibility issues — interpolation will fail for those until they're fixed. We cover this below under Compatibility Issues.

First Impression — preview the interpolation

Curious about the result? So are we.

To use the Weight axis, open the Variations panel. If it isn't visible, choose View → Panels from the main menu and make sure Variations is checked — or press Ctrl+F7 to toggle it.

The Variations panel lets you preview any location between your masters. Drag the Weight slider and the outlines interpolate automatically.

One more panel helps here: the Masters and Layers panel. If it isn't visible, choose View → Panels → Masters and Layers, or press Ctrl+F6. This panel lets you switch between the available masters — important, because glyph outline layers always live on a master. If you want to adjust the Regular outline, select the Regular master first.

Test Web Font

Playing with the Weight slider is neat, but does it work outside FontCreator?

From the main menu, choose Font → Test Web Font (or press Ctrl+F5). FontCreator exports the variable font along with a web page and opens it in your default browser, so you can confirm the interpolation works in a real environment.

Compatibility Issues

Interpolation only works if the outline layers are compatible. For each glyph, the outline layers must have the same number of contours, in the same order, with the same number of points. For composite glyphs, the glyph members must match.

To let FontCreator fix the basic issues:

1. Select all glyphs in the Font Overview panel.
2. Click the Fix toolbar button at the top of the Masters and Layers panel.

Most likely some glyphs still have issues. To fix those, adjust the outlines by hand:

1. Double-click a glyph to open it in a Glyph panel. The Masters and Layers panel now shows hints about the kind of compatibility issue.
2. Enable the Show compatibility issues toolbar button (also on the Masters and Layers panel) so you can see exactly what needs correcting.

All compatibility issues must be resolved, otherwise your font ends up with glyphs that don't interpolate correctly. Fixing compatibility carefully is the heart of making a variable font work — there's a dedicated tutorial on it in the map below.

Named Instances

To make the most of your variable font, include named instances. This way legacy software that lacks variation support can still use the predefined styles.

Go to the Instances tab on the Font Properties panel. Update the axis location for the Default instance (400), then add more instances with weights 500, 600, and 700, each with a unique Style Name.

Although not required for the variable font itself, also provide correct Weight Class and Width Class values. Those matter if you export these instances as non-variable fonts — so you get them almost for free.

Axis Values

One more thing worth doing: give names to specific locations on an axis (or a combination of axes). Add axis values that match the axis locations used in your named instances — so 400, 500, 600, and 700. Also check Elidable axis value name for the Regular (400) axis value, since that one represents the normal Weight.

Export the variable font (CFF2)

When the masters are compatible and the instances are defined, export the font itself. Open Font Export Settings, set Export to Variable font, and pick your Outline Format — CFF (PostScript) gives you compact cubic outlines (the CFF2 flavour) and is the modern default; TrueType is the other choice. Export, then test the file in your target applications — and, as above, use Test Web Font for a quick browser check.

> Tip: Re-run Test Web Font after every round of compatibility fixes. It's the fastest way to catch a glyph that interpolates fine in FontCreator's preview but misbehaves in a real renderer.

Troubleshooting

Frequently asked questions

Do I need separate fonts to start, or can I draw masters in one file? Either works. This tutorial combines two existing static fonts; you can also add axes and masters inside a single file and draw each master directly.

What does "compatible" mean for interpolation? Every glyph's masters must share the same contour count, contour order, and point count (and matching members for composites). If they don't, that glyph can't interpolate.

CFF2 or TrueType outlines for a variable font? CFF2 stores cubic outlines compactly and is the modern default for variable fonts; TrueType (glyf/gvar) variable fonts are also supported. Choose based on your outline type and target.

Why add named instances if the font is variable? Legacy software without variation support falls back to named instances, so users still get your predefined styles.

How do I preview a weight before exporting? Use the Variations panel's Weight slider, and use Font → Test Web Font (Ctrl+F5) to confirm it works in a browser.

What to read next

This page is the starting point for variable fonts in FontCreator. From here:

• Fix Compatibility Between Masters — resolve red-header glyphs so every glyph interpolates cleanly. Start here if Fix didn't catch everything.
• Named Instances & Static Export — define instances and export them as individual static fonts for legacy use.
• Subsetting Variable Fonts — ship a smaller file by trimming glyphs and axis ranges you don't need.
• Switch Glyphs with Feature Variations — swap glyph shapes at specific points along an axis (for example a heavier comma at high weights).
• Variable Contextual Kerning — make kerning itself vary across the design space.