What does size-adjust do?

It scales the fallback face's rendered size without changing its declared font size, so its lines take up roughly the space the webfont will take up. That is what removes the reflow when the webfont arrives. The value is a percentage, and matching it by eye against the preview is how the adjustment is found.

Why prefer font-weight over font-variation-settings?

Because font-weight, font-stretch and optical sizing are ordinary CSS properties: they inherit, cascade and animate, and a stylesheet can override them per component. The raw axis declaration resets every axis it does not mention, does not animate reliably and cannot be reasoned about from the cascade, so it belongs only where no standard property exists.

Is one variable file smaller than three static weights?

Usually smaller than the weights it replaces, and certainly fewer requests. A variable file carries every intermediate value, so it is larger than any single static weight but replaces the range. The trade is one file that covers 100 to 900 against four or five separate files that each need their own declaration.

What happens if the variable font fails to load?

The adjusted fallback renders, which is why the second rule exists and why its metrics were matched. With the size-adjust figure close to the webfont's, the difference between the two states is a change of letterforms rather than a change of layout, which is the least disruptive failure mode available.

Which axes can I use this way?

Weight, width and optical size have standard properties and should always use them. Other axes — grade, contrast, slant or a custom axis — have no equivalent, so they go through font-variation-settings with the axis tag and value. The tool's fifth layer is where that belongs, and the file's own documentation names the tags.

CSS Variable Font Builder

Variable font

Family nameFont URLWeight range descriptorFallback face

Fallback size-adjust%

font-weight used

font-stretch used%

Sample

Weight range300 800

size-adjust100%

Requests1 font file (variable) + optional preload

If the webfont failsArial at 100% size

Rendering

Variable fonts: one file, a continuous range.

The preview uses the fallback face at the adjusted size, because that is the version most first-time visitors actually see. Match it to the webfont and the swap becomes invisible.

Enhancement ladder

Layer	Rule	What it adds
1 · Fallback	font-family: Arial, system-ui, sans-serif	always renders; no font request at all
2 · Metrics match	size-adjust: 100%	removes the layout shift when the webfont lands
3 · Variable face	@font-face { font-weight: 300 800 }	one file covers the whole weight range
4 · Registered properties	font-weight / font-stretch / optical-sizing	axes that inherit, cascade and animate
5 · Raw axes	font-variation-settings: "GRAD" 0	only for axes with no standard property

Full CSS

@font-face {
  font-family: "Racira Variable";
  src: url("/fonts/racira-variable.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-stretch: 75% 125%;
  font-display: swap;
}

/* metrics-matched fallback for the swap period */
@font-face {
  font-family: "Racira Variable fallback";
  src: local("Arial");
  size-adjust: 100%;
}

:root {
  --font-variable: "Racira Variable", "Racira Variable fallback", system-ui, sans-serif;
}

.variable-type {
  font-family: var(--font-variable);
  font-weight: 500;          /* drives the wght axis */
  font-stretch: 100%;       /* drives the wdth axis */
  font-optical-sizing: auto;  /* drives opsz if the font has it */
}

No-JS / font-blocked fallback

:root { --font-variable: "Arial", system-ui, sans-serif; }

You Might Also Need

Variable Font Sliders

Explore variable font axes

@font-face Generator

Generate @font-face rules

Variable Font Axis Exporter

Export variable font axes

Font Loading Strategy Builder

Plan font loading strategy

The CSS variable font builder assembles the three rules a variable font needs in production: the declaration with a weight range, a fallback face whose metrics are close enough to survive the swap, and a usage rule that prefers registered properties over raw axis settings.

What is CSS Variable Font Builder?

The CSS variable font builder writes three rules rather than one, because a variable font in production is a loading strategy as much as a file format. The first rule declares the face with a weight range and a stretch range, the second declares a fallback face whose metrics have been adjusted to match, and the third applies the font with properties that behave like normal CSS.

The tool sets the work out as a five-layer ladder, and each layer is worth understanding.

Layer one is a plain fallback stack that always renders, with no request and no risk.
Layer two adds a metrics match: the fallback is declared with size-adjust set to a percentage between 60 and 150, which changes its rendered size so its lines occupy the space the webfont will occupy. That is what removes the shift when the real font lands.
Layer three declares the variable face itself with a format of woff2-variations, a weight range such as 300 to 800, a stretch range of 75 to 125 per cent and a display policy of swap.
Layer four applies the font with registered properties — font-weight for the weight axis, font-stretch for the width axis and optical sizing set to auto for a face with an optical size axis.
Layer five is the escape hatch: font-variation-settings for axes that have no standard property, such as a grade axis.

The reason registered properties come before the escape hatch is that they cascade, inherit and animate like any other CSS property, while font-variation-settings is a single declaration that resets every axis it does not mention and cannot be transitioned reliably. The preview makes the loading point visually: it renders the text in the fallback face at the adjusted size, because that is the version most first-time visitors actually see, and matching it to the webfont is what makes the swap invisible. Finding the figure is a matter of entering a value, comparing the two versions and repeating until they occupy the same lines, since the percentage belongs to the pair of faces rather than to any standard.

Four limits apply, and they are the reasons the output still has to be reviewed.

One URL is generated, so a static fallback for very old engines has to be added by hand rather than being assembled by the tool.
The size-adjust figure is a single percentage, so a face that needs different adjustments at different weights cannot be matched exactly and the compromise has to be chosen deliberately.
Optical sizing only does anything when the file carries an optical size axis, and a variable font without one simply ignores the declaration.
The raw axis names in the final layer are specific to each file, so they are applied by whoever pastes the CSS and cannot be guessed from the font's name.
Nothing checks that the declared weight range matches the axes the file actually carries, so an optimistic range can advertise weights the font cannot render.

How to use CSS Variable Font Builder

Enter the family name, file URL and the weight range the variable file covers, matching the descriptor to the file's real axis.
Choose the fallback face and tune size-adjust while watching the preview, which shows the fallback at the adjusted size rather than the webfont.
Set the weight and stretch the type will actually use, so the usage rule carries real values rather than defaults.
Copy the full rule set and the fallback variant, then check the page with the webfont blocked to confirm the fallback reads acceptably.

When to use CSS Variable Font Builder vs related tools

Reach for it when a variable font is being introduced and the loading strategy has to be settled at the same time, when a swap is producing a visible jump in a page whose fallback metrics differ, or when someone is reaching for raw axis settings where a registered property would do the job and animate. The ladder is the useful model. For the declaration alone, the font-face generator writes it without the metrics layer; the variable font sliders explore what the axes do, and the font loading strategy builder decides how many files the page should ask for.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.