@font-face Declaration Builder

Overview

The @font-face Declaration Builder assembles a complete CSS @font-face block from a family name, weight, style, unicode range, font-display strategy, and one or more source URLs. It writes out the multi-format src: cascade in the right order (woff2 first, woff fallback) and emits the correct format() hints so browsers pick the smallest file they can decode.

Reach for it when self-hosting custom fonts, embedding variable fonts, or generating a Google-Fonts-style snippet for offline use. Front-end developers and designers tackling questions like how to write a @font-face rule for woff2 or how to set font-display swap for performance can produce a copy-paste-ready block in seconds.

How it works

The CSS Fonts Module defines @font-face with descriptors — font-family, src, font-weight, font-style, font-stretch, font-display, and unicode-range. Browsers evaluate the src: list left to right, accepting the first source whose format() hint they support. The builder orders sources accordingly (woff2 → woff → ttf → otf) and wraps quoted paths so spaces and querystrings are preserved.

Variable-font axes are expressed as weight or stretch ranges (e.g. font-weight: 100 900). The output also keeps each rule scoped to a single family + weight + style triple, so you can stack multiple @font-face declarations for the same family without conflicts.

Examples

• Family Inter, weight 400, style normal, src /fonts/inter.woff2 produces a single rule with font-display: swap and a woff2 format() hint.
• A variable font with font-weight: 100 900 and src: url('/fonts/inter-var.woff2') format('woff2-variations').
• Pasting two source URLs emits a multi-line src: block with comma-separated url() + format() pairs.
• A subset family with unicode-range: U+0000-00FF produces a Latin-only rule the browser only downloads when needed.

FAQ

Do I need every font format?

No. WOFF2 covers every modern browser. Only add WOFF if you must support very old browsers or specific embedded environments.

What does font-display: swap do?

It tells the browser to render fallback text immediately and swap in the custom font once it loads, avoiding invisible text during web font load (FOIT). optional and fallback trade slightly different behaviours.

Why specify unicode-range?

It lets the browser skip downloading the font file entirely if the page contains no characters in that range — a huge win for multi-script sites.

Can I use this for Google Fonts?

Yes. Open the Google CSS URL, copy each src: URL, and paste them into the builder to produce a self-hosted equivalent that avoids a third-party origin request.

Try @font-face Declaration Builder