@font-face Rule & Preload Generator

A custom font only works if the browser knows where to find it, which family name and weight it stands for, and what to show while it loads. All of this lives in @font-face rules, and small mistakes, such as a wrong format hint, a missing crossorigin or a weight that does not match, lead to fonts that silently fail to load or load twice. This page builds the rules from a short form and gives you the HTML to go with them.

What a rule says

An @font-face rule describes one face of a family. font-family is the name you will use in CSS. src lists files, each with a format() hint so the browser skips what it cannot read without downloading. font-weight and font-style say which weight and style the file provides, so font-weight: 700 picks the bold file. font-display controls what happens during loading. Optionally, unicode-range limits the characters the file covers and local() tries a copy installed on the visitor’s device first.

A worked example

Press Sample to load an Inter family with three faces. Regular has WOFF2 and WOFF files, Italic has WOFF2 only, and Bold has both again. The output opens with @font-face { font-family: "Inter"; src: url("/fonts/inter-regular.woff2") format("woff2"), url("/fonts/inter-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } and continues with the italic rule (font-style: italic) and the bold rule (font-weight: 700). A body rule follows: font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;. The preload box lists three tags such as <link rel="preload" href="/fonts/inter-regular.woff2" as="font" type="font/woff2" crossorigin>.

Order and formats

The browser walks the src list from the top and takes the first format it supports, so WOFF2 comes first, then WOFF, then TrueType or OpenType. Most sites now ship only WOFF2, which every current browser reads, but a WOFF entry costs nothing if you have the file. If you give a TTF address ending in .otf, the format hint is opentype; otherwise it is truetype. For a variable font, enter a weight range such as 100 900 in one rule and a single file.

Loading behaviour

swap shows text at once in the fallback font and swaps when the font arrives; fallback allows a short swap window; optional uses the font only if it arrives almost immediately, which avoids layout shift; block hides text for a short period. Preload tells the browser to fetch a font early, before the CSS has been parsed. Do it for the one or two faces used above the fold, since preloading all of them competes with other resources.

Fallback stacks

The fallback stack decides how the page looks before the font loads and whenever it fails. Choose sans-serif, serif or monospace and the page writes a stack of system fonts that suit it, ending with the generic family. Pick a fallback with similar proportions to the web font to reduce the jump when it swaps in.

Edge cases

Weights must be numbers; the form warns when the value is not like 400 or 100 900. A face with no file address is skipped with a note. Weight and style combinations that are not declared are synthesised by the browser, which looks worse than a real italic or bold. Case matters in file paths on most servers. The local() option looks for an installed font with the family name, and may pick up a different version than your file.

Limits

The generator does not check that the files exist or are valid fonts; use the font inspector for that. It writes CSS and link tags, not server headers: serve fonts with a long cache lifetime and Access-Control-Allow-Origin when they come from another domain. Everything is composed in your browser.

Related tools

• TTF to WOFF2 Converter produces the files to reference.
• Font Subsetter shrinks them and writes a unicode-range.
• Variable Font Tester finds the weight range of a variable font.
• CSS Clamp Calculator sets fluid sizes for the text.