CSS @font-face Generator

How to use

1. 1Type the font family name you want to use in your CSS. Names with spaces are wrapped in quotes for you.
2. 2Add one source per font file you host, listing the woff2 file first, then older formats as fallbacks. Use a path like /fonts/name.woff2 or a full URL.
3. 3Leave the format on Auto to detect it from the extension, or pick a format manually when the URL has no clear extension.
4. 4Choose the weight (or a range for a variable font), the style, an optional font-stretch, and a font-display strategy using the plain-language hints.
5. 5Optionally set a unicode-range to load the file only for certain characters, and add font-feature-settings if you want ligatures or kerning at the face level.
6. 6Copy the generated @font-face CSS, copy the matching preload tag if you enabled it, and load a local font file to preview it before you deploy.

About this tool

The CSS @font-face Generator writes the rule you need when you stop relying on a font CDN and host a custom font yourself. Self-hosting is the fastest, most private way to load a webfont: the file comes from your own origin, nothing is requested from a third party, and you control caching. The catch is that the @font-face syntax is easy to get subtly wrong, and a wrong format() hint, a missing font-display, or a forgotten crossorigin on the preload can cost you the performance you were trying to gain. This tool produces a clean, copy-ready block from a few inputs. You give the font a family name, which the tool quotes automatically when it contains spaces or starts with a digit so the CSS stays valid, then you list one source per file you host. Put the woff2 first because it is the smallest and best supported format, then add older formats like woff, truetype, or opentype as fallbacks for legacy browsers. The format() hint next to each src is detected from the file extension, and you can override it when a URL has no extension or uses a query string. You pick the weight, including a two-number range such as 100 900 for a variable font, the style (normal, italic, or oblique), an optional font-stretch value or range for condensed and expanded designs, and the font-display strategy. The font-display choices are explained in plain language because the right answer depends on the text: swap shows a fallback immediately and is the safe default for body copy, optional avoids a layout shift on slow connections, and block hides text briefly and risks the invisible-text flash. If you split a font by language to ship smaller files, you can add a unicode-range from a preset (Latin, Cyrillic, Greek, CJK, emoji) or a custom value so the browser only downloads a file when the page actually uses those characters. An optional font-feature-settings field lets you turn on features like ligatures or kerning at the face level. Alongside the rule, the tool can generate the matching link rel=preload tag with the correct type and the crossorigin attribute that font requests require even on the same origin, so the browser starts fetching the file earlier. A live preview is included and is genuinely useful: load a font file from your own device and the tool registers it with the browser CSS Font Loading API and renders sample text in it at an adjustable size, so you can confirm the weight and style before you ship. That file is processed only in the browser through an object URL and is never uploaded or sent anywhere. The tool does not convert or subset fonts and does not host the files for you; it writes the CSS and the preload tag, and you upload the font files to your own server or asset host. Everything runs locally in your browser with no signup and no login.

Free to use. Works in your browser. No signup, no login.