Why list a local source before the file?

Because it avoids a download for anyone who already has the family installed, and it makes the webfont optional rather than mandatory. The trade-off is that a developer with the family installed will not notice a broken file path, so the downloaded route has to be tested deliberately by removing the local entry.

Which font-display value should I use?

For body copy, swap: text is visible immediately and one re-render is acceptable. For a logo or a short display line, block can be defensible since a brief invisibility is less disruptive than a visible swap. Optional removes layout shift entirely but on a slow connection the webfont may never appear for that page view.

Does a unicode range reduce the download?

Only when the file itself is a subset. The descriptor tells the browser which characters this declaration covers, so a page that needs none of them inside the range never fetches the file. Pointing a range at a full font file still transfers the whole file once it is used.

Can one declaration cover several weights?

Yes, with a weight range. A variable file declared with a range from 100 to 900 serves every weight in between, and the text requests them with ordinary font-weight values. A static file, in contrast, needs one declaration per weight, which is why the row count and the file count grow together.

What if the font arrives as several formats?

The generator writes one file source, since modern browsers all accept woff2. A chain for older engines has to be assembled by hand, listing each source with its format so the browser picks the first it understands. In practice the extra formats are rarely worth the complexity today.

@font-face Generator

Declare the face

font-familylocal() name (optional)Font file URLFormatfont-weightfont-stylefont-displayunicode-range (optional)

src() entries2

Loading trade-offFOUT, no blank text

unicode-rangescoped subset

@font-face

@font-face {
  font-family: "Racira Sans";
  src: local("Racira Sans"),
       url("/fonts/racira-sans.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+2000-206F;
}

Usage

font-family: "Racira Sans", sans-serif;

Preview

Handgloves — Wmgybridq 0123456789

The preview uses a locally installed family of the same name if one exists; the declaration itself ships regardless.

You Might Also Need

Font Face Declaration Builder

Build @font-face rules

CSS Font Stack Builder

Build robust font-family stacks

Font Loading Strategy Builder

Plan font loading strategy

CSS Variable Font Builder

Build variable font CSS

The @font-face generator writes the declaration a webfont actually needs: a local source first, a file second, and the weight, style, display and character-range fields that decide how it loads. The descriptors are what separate a working declaration from one that downloads on every page view.

What is @font-face Generator?

The @font-face generator builds a complete declaration and the matching usage rule, with the fields that change behaviour rather than the ones that merely satisfy a validator.

The descriptors it writes, and what each one decides:

Font family and an optional local source, listed first so a locally installed copy is used without a download when one exists.
The file URL with its format, offered as woff2, woff, truetype or opentype, with woff2 first in the list because of its size advantage.
The weight, which accepts a single value or a two-value range — a range is how one variable file covers several weights.
The style, normal, italic or oblique, which has to match the style the text asks for or the browser synthesises a slant instead.
The display policy, from swap, fallback, optional, block and auto, and an optional unicode-range that scopes the descriptor to a subset of characters.

The loading trade-off is reported beside the font-display choice, because font-display is the descriptor with a visible cost. Swap keeps text visible from the first paint and accepts a re-render when the webfont lands, which is the usual choice for body copy. Block hides the text for a short period and then paints the real face, which suits a logo and harms a paragraph. Optional gives the file a very short window and then never uses it for that page view, which removes layout shift entirely at the cost of the webfont often not appearing at all on a slow connection. Auto leaves the decision to the browser and is the least predictable of the five.

Two details deserve attention because they cause most of the confusion, and both live in the src descriptor. Listing a local source first is a performance win and a testing hazard: a developer with the family installed never sees the download, so the file path can be broken for weeks without anyone noticing. And a unicode-range only prevents a download when the referenced file is genuinely a subset; writing a range beside a full font file changes nothing about the bytes the page fetches, it only scopes which characters the declaration claims.

What the generator leaves out is also a choice, and each omission points at a different follow-up.

It writes one file source, so a format chain for older browsers has to be assembled by hand and the woff2 preference is assumed rather than negotiated.
It does not emit the size-adjust or ascent-override descriptors that remove layout shift in a fallback, which belong with a stack rather than with a single face.
It cannot verify that the URL resolves, so a typo in the path produces a declaration that fails silently and shows the fallback face.
It does not check that a unicode-range matches the characters the subset file really contains, which is the difference between a scoped download and a request that quietly fetches a different file.
It generates no preload hint, so a file that is needed above the fold still waits for the stylesheet to be parsed before the browser learns about it.

How to use @font-face Generator

Enter the family name and the local name, keeping the local source first so an installed copy avoids the download.
Add the file URL and format, then set the weight and style to match the rules that will request the face.
Choose the display policy from the trade-off readout rather than by habit, and add a character range only if the file is a real subset.
Copy both outputs, then test with the local copy removed so the downloaded path is actually exercised.

When to use @font-face Generator vs related tools

Reach for it when a webfont has to be declared correctly the first time, when text is invisible for a moment on load and the display policy needs revisiting, or when a declaration has to be audited for the fields that decide whether it downloads at all. The trade-off readout is the quickest way to explain font-display to someone who has never met it. For the fallback metrics that remove the jump, the CSS variable font builder covers size-adjust, the font loading strategy builder decides how many files to serve, and the CSS font stack builder writes the chain the usage rule joins.

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.