Create a FONTFACECSS output for @font-face styling from your uploaded file in your browser.
@font-face {
font-family: 'My Font';
src: url('fonts/myfont.woff2') format('woff2'),
url('fonts/myfont.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}.woff2, .woff, .ttf, or .otf from your machine. Add multiple weights (Regular, Bold, Italic) in one go — each becomes its own @font-face block. The tool runs entirely in your browser, so the font binaries never leave your device.font-family you want to reference (any string — "Inter", "My Brand Sans"). Pick a font-weight from 100 to 900 (or a range like 100 900 for variable fonts) and a font-style of normal, italic, or oblique. Mismatched weights/styles per file is the most common cause of "my bold isn't bolding" — set them deliberately.font-display: swap for fastest LCP with FOUT, optional for FOIT-free pages that skip late swaps, block for branded headings where the fallback would look wrong. Optionally enter a unicode-range (e.g. U+0000-00FF for Basic Latin) so browsers skip the download when no matching glyphs are on the page.@font-face { ... } rule with a multi-format src: fallback chain (woff2 first, then woff and ttf if you uploaded them). Drop the snippet into your stylesheet and host the font files on the same origin (or send the right CORS headers — see FAQ).Hand-writing @font-face rules is tedious and error-prone: forget to list format('woff2') and modern browsers can't pick the optimised file; get the font-weight descriptor wrong and <strong> falls back to a faux-bold system font. This generator removes the busywork while letting you control every descriptor that actually matters for performance and rendering.
@font-face block is the only thing that keeps your typography working offline of Google's CDN.Inter[wght].woff2 can cover weights 100–900 if you declare font-weight: 100 900 in @font-face. That replaces 9 separate font requests with one, typically saving 200–600 KB on first paint.font-display: swap plus a <link rel="preload"> hint shaves off the FOIT (Flash of Invisible Text) that costs you LCP score in Core Web Vitals and Lighthouse.unicode-range lets the browser download only what the page actually renders — the same trick Google Fonts uses in production.@font-face work in most modern email clients and headless-Chrome PDF generators where Google Fonts' dynamic CSS would be blocked or stripped.@font-face snippet to drop into the global stylesheet. Generating it once and committing it to the repo beats copy-pasting from old projects.| Format | When to include | Browser support (2026) |
|---|---|---|
WOFF2 (format('woff2')) |
Always — list first | ~96% global; Chrome 36+, Firefox 39+, Safari 12+, Edge 14+ |
WOFF (format('woff')) |
Only if you need pre-2015 browsers | ~98%; legacy iOS 5–9, IE 9+ |
TTF / OTF (format('truetype') / format('opentype')) |
Niche — older Android WebView, some e-readers | Universal but ~2× larger than WOFF2 |
EOT (format('embedded-opentype')) |
Drop. IE 11 retired June 2022 | Internet Explorer only |
| SVG fonts | Drop. Deprecated | Removed from Chrome 38, never in Firefox |
Order in src: matters — the browser picks the first format string it recognises. List woff2 before woff before ttf. For greenfield projects in 2026, WOFF2-only is a reasonable default; add WOFF only if analytics show meaningful traffic from pre-2015 mobile browsers.
| Value | Block period | Swap period | Use it when |
|---|---|---|---|
auto |
UA default | UA default | You haven't decided (most browsers behave like block) |
block |
~3 s (short) | Infinite | Branded headings where fallback looks wrong (FOIT acceptable) |
swap |
~100 ms | Infinite | Body text, marketing pages — best for LCP, accepts FOUT |
fallback |
~100 ms | ~3 s short | Compromise — late-loading font is treated as a failure |
optional |
~100 ms | None | Performance-first — if the font isn't cached after 100 ms, fallback stays for the session |
swap is the safe default for most sites. optional is the most performance-oriented value — it gives the browser ~100 ms to fetch the font and then commits to whatever's shown for the rest of the session, eliminating the awkward late swap that hurts perceived stability.
swap shows the fallback font immediately (FOUT) and swaps to your custom font whenever it arrives — even if that's seconds later. optional gives the browser roughly a 100 ms window to load the font; if it doesn't finish in time, the fallback stays for the whole session and no swap ever happens. Pick swap when brand typography matters more than layout stability, and optional when you want zero layout shifts (great for Cumulative Layout Shift scores) and are OK with returning visitors seeing the custom font but new visitors sometimes not.
src: matter?Browsers walk the src: list left-to-right and use the first format they recognise. If you list format('woff') before format('woff2'), modern Chrome and Safari will download the larger WOFF file instead of the optimised WOFF2 — wasting 30–50% bandwidth. The generator always emits woff2 first, then woff, then ttf. Don't reorder unless you have a specific reason.
For most audiences, yes. WOFF2 has ~96% global support per caniuse — every current Chrome, Firefox, Safari, and Edge handles it, plus Safari back to version 12 (2018) and Chrome back to version 36 (2014). The only browsers needing WOFF fallback are IE 11 (retired June 2022) and some pre-2015 mobile browsers. Check your analytics: if your bottom-5% browsers are all post-2018, you can confidently ship WOFF2-only.
A single variable font file replaces multiple static weights. Declare the full range in your @font-face: font-weight: 100 900; (and optionally font-stretch: 75% 125%; for width axes). Use format('woff2-variations') if you need older-Safari compatibility, otherwise plain format('woff2') works in current browsers. One Inter[wght].woff2 typically replaces 9 separate weight files — same visual range, one HTTP request.
Yes, dramatically — for multi-script sites. When a page only contains Latin characters, a browser sees a @font-face block with unicode-range: U+0000-00FF and skips the download entirely if no glyphs in that range appear. Google Fonts ships every font split into Latin / Latin-Extended / Cyrillic / Greek / Vietnamese subsets exactly for this reason. For a Latin-only English site, the gain is small; for a site that loads CJK conditionally, you can save 5–20 MB per pageview.
@font-face enforces CORS when the font file is on a different origin (including different subdomain) from the stylesheet that references it. Fix it by adding Access-Control-Allow-Origin: * (or your specific origin) to the response headers from your font server — typically via .htaccess, Nginx config, or your CDN's edge rules. WebKit browsers (Chrome, Safari) historically allowed cross-origin fonts without CORS, but modern versions enforce it. If your fonts are on the same origin as the CSS, you don't need CORS at all.
<link rel="preload"> my fonts as well as declaring @font-face?@font-face only triggers a font download when the browser encounters a styled element that needs that font — which is after CSSOM construction. A <link rel="preload" as="font" type="font/woff2" crossorigin> in <head> starts the fetch as soon as HTML is parsed, often 200–500 ms earlier. Preload your 1–2 most important fonts only (e.g. body Regular and headings Bold) — preloading every weight delays other critical resources. The crossorigin attribute is required even for same-origin fonts.
Yes — icon fonts are regular fonts with glyphs mapped to Private Use Area codepoints (e.g. U+E000–U+F8FF). You can host Font Awesome's WOFF2 yourself and generate the @font-face block here. Pair it with a unicode-range: U+E000-F8FF declaration so the icon font only downloads if your page actually uses icons. The modern alternative is SVG icon sprites, which are usually smaller per-icon than a font containing 1,000+ glyphs you don't use.
Inline it in your global stylesheet (often app.css, globals.css, or index.css) at the very top — before any rule that uses the font-family. In Next.js, the next/font API is preferred but you can use the generated block in _document.tsx. In Tailwind, add it to your @layer base block. The font files themselves go in your public/ (or static/) directory at a stable URL — typically /fonts/myfont.woff2. If you also need to clean up your generated CSS, the CSS formatter and CSS minifier pages will pretty-print or compress it.