@font-face generator
Generate clean @font-face CSS for self-hosted fonts: static weights or a variable font, italics, font-display, unicode-range and a preload tag.
@font-face {
font-family: "My Font";
src: url("/fonts/my-font-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "My Font";
src: url("/fonts/my-font-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
body {
font-family: "My Font", system-ui, sans-serif;
}
<!-- Optional: preload the file used for body text, in <head> -->
<link rel="preload" href="/fonts/my-font-400.woff2" as="font" type="font/woff2" crossorigin>How do you write an @font-face rule?
Each @font-face rule connects one font file to a family name, a weight and a style. Use the same font-family name in every rule and let font-weight and font-style tell them apart. The browser then picks the right file when your CSS asks for font-weight: 700, and it only downloads the files a page uses.
WOFF2 is all you need today, since every current browser supports it. A variable font replaces the separate weight files with one file and a weight range such as font-weight: 100 900. font-display: swap shows fallback text immediately and swaps when the font arrives. optional avoids the swap entirely on slow connections.
The file names in the output follow the pattern prefix-weight.woff2. Rename them to match your files. Only self-host fonts your license allows: open source fonts such as those on Google Fonts are fine, while most commercial web licenses have their own hosting terms.
Why is my @font-face font not showing?+
The usual causes are a wrong file path, a family name that does not match between the rule and your font-family declaration, a missing weight, or a cross-origin file served without CORS headers. Check the Network panel for the font request. More in CSS font stacks and fallbacks.
Should I preload my fonts?+
Preload only the one or two files needed for text visible on first load. Preloading everything competes with more important resources. The crossorigin attribute is required on font preloads, even for files on your own domain.
What does unicode-range do?+
It tells the browser which characters a file covers. The browser skips the download when the page has none of those characters, which is how large families are split into per-script subsets.
Copy a working @font-face from any site you are licensed to use.
For self-hosted fonts, Font Inspector lists the font files a page loads and copies a ready @font-face rule with absolute URLs. Useful for auditing your own sites.