CSS @font-face Generator

What this tool is used for

• Producing the rules to self-host a font instead of loading it from a third party.
• Getting the format list and source order right for the browsers you support.
• Adding a display strategy so text is visible while the font loads.
• Declaring several weights of one family correctly.
• Producing a starting block you then extend with unicode ranges.

Frequently Asked Questions

Which font formats do I actually need?

WOFF2 alone, for anything targeting current browsers — support has been universal for years and it compresses roughly 30% better than WOFF. The old four-format stack with EOT, TTF and SVG exists for IE and Android 4, and shipping it now is dead weight.

What does font-display change?

What the browser shows while the font loads. `swap` renders fallback text immediately and swaps when ready — no invisible text, but a visible reflow. `optional` gives the font a very short window and otherwise keeps the fallback for that page view, which is the best choice for a non-critical face.

What is FOIT and why does it matter?

Flash of Invisible Text — the period where a browser renders nothing rather than showing a fallback. It was the default behaviour for years and could last three seconds on a slow connection, which is a page that appears broken. `font-display` exists to stop it.

Should I preload the font?

Only the one or two faces used above the fold. `<link rel="preload" as="font" crossorigin>` starts the download earlier, and the `crossorigin` attribute is required even for a same-origin font because fonts are always fetched in CORS mode. Preloading everything just moves the contention.

Is a variable font worth it?

Usually, when you need more than two weights. One variable file covering 100–900 is typically smaller than three static weights and gives every intermediate value — and it removes the faux-bold problem, where the browser synthesises a weight you did not ship.

Common errors and gotchas

• Listing formats in the wrong order, so an older format wins over a smaller modern one.
• Omitting `font-display`, which leaves text invisible during the load in many browsers.
• Declaring one rule for several weights, which makes the browser synthesise rather than use the real file.
• Getting the path wrong relative to the stylesheet rather than the document.
• Self-hosting a font whose licence does not permit it, which is a legal problem rather than a technical one.