// build @font-face css with multi-format fallbacks
Generate complete @font-face CSS rules with multiple format fallbacks for self-hosted fonts. Supports WOFF2, WOFF, TTF, EOT, and SVG with unicode-range and font-display options.
Ready to generate
Configure your font options and click GenerateSet the font family name, file base path, and optional local() fallback name.
Select the formats you need (WOFF2 + WOFF recommended) and add weight/style variants.
Click Generate, copy the CSS, and paste it at the top of your stylesheet before any font-family references.
The @font-face CSS rule lets you serve custom fonts directly from your own server, giving you full control over loading behavior, performance, and privacy. This tool generates the complete rule with correct format hints and fallback order.
For modern browsers, WOFF2 only covers ~96% of global users. Adding WOFF as a fallback pushes coverage to ~99%+. TTF/EOT/SVG are only needed if you must support Internet Explorer 8 or very old Android/iOS versions — not worth it for most projects.
font-display: swap shows the fallback system font immediately, then swaps to your custom font once it loads. This prevents invisible text (FOIT) and improves Core Web Vitals. It's the recommended setting for most cases. Use optional if you only want the font shown when it's already cached.
The local() declaration checks if the font is already installed on the user's system before downloading. If it's found locally, the download is skipped entirely — saving bandwidth and improving load time. Always list local() first in your src declaration.
unicode-range tells the browser to only download this font file if the page actually contains characters in the specified range. This is the technique used by Google Fonts to serve small subset files per script (Latin, Cyrillic, Greek, etc.) instead of one giant file.
Yes. Each font weight and style combination needs its own @font-face block pointing to the correct file. Without this, browsers will synthesize bold/italic by algorithmically distorting the regular font, resulting in poor rendering. Use the "Add Variant" feature to generate all needed blocks at once.
Put all @font-face declarations at the very top of your main stylesheet, or in a dedicated fonts.css file loaded before other styles. The browser needs to see font declarations before it encounters font-family references to begin downloading efficiently.
The @font-face at-rule is how the web loads custom typography. Rather than relying on system fonts or third-party CDNs like Google Fonts, @font-face lets you serve font files from your own server — giving you full control over performance, privacy, and loading behavior. Writing it correctly, with the right format order, fallbacks, and display strategy, is what this generator handles for you.
💡 Looking for premium CSS templates and UI kits? MonsterONE offers unlimited downloads of templates, UI kits, and assets — worth checking out.
A complete @font-face declaration contains several key properties. The font-family property defines the name you'll use in the rest of your CSS. The src property is a prioritized list of font sources — the browser tries each in order, stopping at the first format it supports. The font-weight and font-style descriptors tell the browser which variant (regular, bold, italic) this block describes. Finally, font-display controls the loading behavior.
The order of formats in your src declaration matters. Always list woff2 first — it offers the best compression (typically 30% smaller than WOFF) and is supported by all modern browsers including Chrome, Firefox, Safari, and Edge. Follow it with woff for slightly older browsers. TTF can serve as a final fallback for very old systems, but EOT (Internet Explorer) and SVG (old iOS) are essentially never needed in new projects.
The format hint in parentheses — format('woff2') — is important. Without it, some browsers may download a file just to determine its format, wasting bandwidth. Including the hint lets the browser skip formats it doesn't support without downloading the file.
The font-display descriptor was introduced specifically to address the "flash of invisible text" (FOIT) problem. Before it existed, browsers would hide all text until the custom font loaded — sometimes for seconds on slow connections. The five values give fine-grained control:
swap shows the fallback system font immediately, then swaps to the custom font once it's ready. This is the most common choice and what Google Fonts uses. Text is always visible, and the swap happens when the download completes. The tradeoff is a potential layout shift (CLS) when the font swaps.
block gives the browser a short period (typically 3 seconds) to load the font before showing invisible text. After that, it falls back permanently. Useful when the custom font is absolutely critical and a brief invisible period is acceptable.
fallback is a middle ground: a very brief block period (100ms), then fallback display, with a short window for swapping. If the font doesn't load quickly, it won't be used at all in this page view.
optional is the most performance-conscious: only use the font if it loads within a very small window or is already cached. Eliminates layout shift at the cost of potentially never showing the custom font on first load.
Many developers are surprised to learn that a single font family requires multiple @font-face blocks. Each weight (400 Regular, 700 Bold) and style (normal, italic) needs its own declaration pointing to the corresponding font file. Without this, the browser synthesizes bold by doubling stroke width and synthesizes italic by slanting — both look terrible compared to proper drawn variants.
The convention for file naming typically appends the variant to the base filename: my-font-regular.woff2, my-font-bold.woff2, my-font-italic.woff2. This generator's file suffix field handles that pattern automatically across all your selected formats.
The unicode-range descriptor is a powerful optimization technique. When specified, the browser only downloads the font file if the page actually contains characters within the specified Unicode code point range. This is exactly how Google Fonts serves hundreds of languages efficiently — instead of one 500KB font covering every possible character, it serves small 10-30KB subset files, downloading only what the page needs.
Common ranges include U+0000-00FF for Basic Latin and Latin-1 Supplement, U+0400-04FF for Cyrillic, and U+4E00-9FFF for CJK Unified Ideographs. You can specify multiple ranges as a comma-separated list.
The local() function in the src list checks whether a font is already installed on the user's operating system. If the font is found locally, the browser uses it directly without making any network request. This is a free performance win — always include it as the first item in your src list. Use the PostScript name or full name of the font as the argument.
While Google Fonts is convenient, there are strong reasons to self-host: GDPR compliance (Google Fonts sends user IP addresses to Google's servers), eliminating third-party DNS lookups, controlling cache headers and CDN behavior, and preventing unexpected font changes when Google updates its library. Self-hosting with @font-face gives you all these benefits at the cost of managing the font files yourself.