CSS @font-face Generator
Note: Fonts are fetched with CORS even from your own host in some setups. If the file is on a different origin — a CDN or a separate assets domain — it needs a permissive Access-Control-Allow-Origin header or the browser downloads it and refuses to use it.
The first is format. woff2 is supported by every browser in use and compresses roughly 30% better than woff, so a src list with woff2 first and nothing else is the correct modern answer. Adding ttf or eot as fallbacks costs you nothing in bandwidth — the browser stops at the first format it understands — but it does cost you the discipline of maintaining files nobody downloads.
The second is font-display, which decides what the user sees during the few hundred milliseconds before the font arrives. swap shows fallback text immediately and switches when the font loads, so nothing is ever invisible; the cost is a visible reflow. optional gives the browser a very short window and then simply keeps the fallback for that page load, which eliminates the reflow at the price of the font not always appearing. block hides the text entirely for up to three seconds and is almost never the right choice for body copy — though it is defensible for an icon font, where the fallback is meaningless boxes.
The third is the swap itself, and it is the part most rules leave out. When the fallback and the webfont have different metrics, the text reflows at the moment of the switch, which is a layout shift Core Web Vitals will charge you for. size-adjust, ascent-override and descent-override let you tune a fallback so it occupies almost exactly the space the real font will, making the swap nearly invisible. The generator writes a matched fallback rule for the common system faces.
One rule per weight and style. A single rule with a comma-separated list of weights does not work.
Frequently Asked Questions
Do I still need woff alongside woff2?
No. Every browser that can run a site built this decade supports woff2, and the ones that cannot are not reaching your CSS anyway. A src list containing only woff2 is correct, and it means one file per weight to generate, host and cache-bust.
Which font-display value should I use?
swap for body text — the text is never invisible and the reflow is acceptable. optional when you would rather have no reflow at all and can live with the font sometimes not appearing. block only for icon fonts, where the fallback is meaningless.
What does size-adjust actually fix?
The layout shift at the moment the webfont replaces the fallback. If the two have different metrics, every line of text moves. Tuning size-adjust and the ascent and descent overrides on a fallback rule makes it occupy the same space, so the swap changes the letterforms without moving anything.
Why is my font not loading at all?
In order of likelihood: the path is relative to the stylesheet rather than the page, the font is on another origin without a permissive CORS header, or the font-family name in the rule does not match the one used in font-family. Fonts are fetched with CORS even when images from the same host are not.
Should I preload the font?
Only the one or two faces used above the fold, and only if you self-host them. A preload jumps the queue ahead of other resources, so preloading six weights delays the things that render the page. Preloading a font you do not use on that page is worse than not preloading at all.
