What do the three overrides actually do?

size-adjust scales the glyphs, and ascent-override plus descent-override redefine the vertical box the line box is measured against. Applied together they make a webfont occupy the same space as the fallback it replaces, which removes the layout shift at swap time.

Where do I get the real metric values?

The tool does not read them from the font file, so use the reference values in the panel — Arial, Georgia and Segoe UI are listed — or take them from the font's documentation or an inspector that reads its tables.

Should I ship the fallback declaration too?

Yes. The fallback is the half that stops the shift: it renders the temporary text with the webfont's metrics. Shipping the main declaration alone leaves the layout moving when the file arrives.

Can font-weight be a range here?

It can. The field accepts a single value or a range such as 400 700, and the range form is the correct descriptor for a variable file that spans those weights.

Is the unicode-range checked?

No. The value is written into the descriptor exactly as typed, so a mistyped series reaches the stylesheet unchanged. The range notation produced by the font character extractor is the safe source for it.

Font Face Declaration Builder

Descriptors

font-familysrc URLformat()font-weightfont-displayunicode-range (optional)

Overridden em box125% of em

Line-height 1.0 renders as1.25em before size-adjust

Adjusted for size-adjust1.25em

Metric overrides

size-adjust (%)

100

ascent-override (%)

100

descent-override (%)

The three overrides let a webfont adopt the metrics of the fallback face it replaces, so the swap shifts nothing. Reference values for common fallbacks: Arial ascent 90.5 / descent 21.2 · Georgia 91.7 / 21.9 · Segoe UI 107.9 / 26.8.

Available in this preview set: Inter, Fraunces, Playfair Display, Lora, Source Serif 4.

@font-face

@font-face {
  font-family: "Racira Display";
  src: url("/fonts/racira-display.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  size-adjust: 100%;
  ascent-override: 100%;
  descent-override: 25%;
}

Metrics-matched fallback

/* metrics-matched fallback for the swap period */
@font-face {
  font-family: "Racira Display fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 100%;
  ascent-override: 100%;
  descent-override: 25%;
}

You Might Also Need

Font CSS Generator

Generate font CSS quickly

Font Loading Strategy Builder

Plan font loading strategy

CSS Fluid Typography Builder

Build fluid CSS typography

Variable Font Axis Exporter

Export variable font axes

The @font-face declaration builder writes a single declaration with the descriptors that decide production behaviour — font-display, optional unicode-range, and the size-adjust, ascent-override and descent-override trio that metrics-matches a fallback so the swap does not shift layout.

What is Font Face Declaration Builder?

The @font-face declaration builder assembles one declaration from a family name, a src URL, a format, a weight value, a font-display choice and an optional unicode-range, then adds the three metric overrides that control how much space the face occupies. The readout translates those overrides into numbers instead of leaving them abstract: the overridden em box, what a line-height of 1.0 renders as before size-adjust, and the same value after size-adjust is applied. A second output writes the matching fallback declaration, which reuses the same overrides on a local font.

Formats offered: woff2, woff, truetype and opentype, written into the format() hint.
font-display values: auto, block, swap, fallback and optional.
font-weight accepts a single value or a range, so 400 and "400 700" both work — the range form is what a variable file needs.
Metric override ranges: size-adjust and ascent-override from 50% to 200%, descent-override from 0% to 100%, each clamped in code before it reaches the CSS.
The fallback declaration resolves through local("Arial"), local("Helvetica") and local("Liberation Sans").
Reference metrics for common fallbacks are printed in the panel: Arial at 90.5 ascent and 21.2 descent, Georgia at 91.7 and 21.9, Segoe UI at 107.9 and 26.8.

The arithmetic is the point of the readout. The natural box is ascent plus descent as a percentage of the em, so 100 and 25 describe a 125% box; size-adjust scales the glyphs, and the adjusted figure multiplies the two together. Setting a webfont's box to match the fallback it replaces is what stops the layout from jumping when the file arrives — the fallback is temporarily rendered with the webfont's own metrics, so line heights computed during the swap are the values the final render keeps. The overrides work on any face, including a font that is not being swapped, and they are the supported alternative to rewriting every line-height in a stylesheet.

The metrics are yours to supply. The tool does not read them out of a font binary, so the numbers come from the reference list, from documentation, or from another tool that inspects the file.
The src URL and weight value are free text. Nothing checks that the file exists or that the weight matches the file's real axis.
unicode-range is passed through verbatim. A malformed series is written into the CSS exactly as typed.
One declaration per run, and the fallback uses a fixed three-family local() stack rather than a platform-specific one.
The em box figures model the overrides, not the rendered text, so they describe spacing behaviour rather than appearance.

Reach for it when a self-hosted face has to slot into an existing layout without a visible reflow: a brand font replacing a system face in body copy, a heading face with unusual vertical metrics, or a subset loaded through a unicode-range window. Copy the fallback declaration alongside the main one — the pair is what makes the swap invisible, and shipping only the first half is the usual mistake. Where a whole family needs declaring, the font CSS generator writes the full set of rules; where the concern is the loading sequence rather than the metrics, the font loading strategy builder plans preload, display and fallback together.

How to use Font Face Declaration Builder

Set the font-family name, the src URL and the format the file is served in.
Enter the font-weight value — a single number, or a range such as 400 700 for a variable file.
Pick a font-display behaviour and, if the face is a subset, paste its unicode-range.
Move the size-adjust, ascent-override and descent-override sliders until the adjusted em box matches the fallback, then copy both declarations.

When to use Font Face Declaration Builder vs related tools

Use this when one face has to land in an existing layout without a reflow, or when a subset should load only for the ranges it covers. It pairs with the font CSS generator, which declares a whole family face by face, and with the font base64 encoder when the file is inlined rather than served. If the loading order itself is the problem, the font loading strategy builder plans preload and display across the page, and the font character extractor produces the unicode-range list a subset needs in the first place.

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.