WOFF2 Base64 Font Embedder | Cut One Font HTTP Request With an Inline @font-face

A self-hosted .woff2 loaded through @font-face costs an extra HTTP round-trip after the CSS parses, and the gap between CSS parse and font arrival is exactly when FOUT (Flash of Unstyled Text) shows up. Base64-encoding the font into the src: URL and shipping it inside the CSS bundle removes both — the font is in hand the moment the rule is evaluated.

This tool runs the base64 step locally, lets you set font-family, font-weight, font-style, and font-display, and emits a ready-to-paste @font-face block with src: url(data:font/woff2;base64,…) format('woff2'). Raw vs base64 byte counts sit above the output so the inflation cost is visible, with a warning when the file crosses 100 KB.

💡 About this tool

This is the answer to the Lighthouse / WebPageTest finding "Eliminate render-blocking resources — woff2" without going back to a font CDN. CDN-hosted fonts have their own cost story now: the Munich Regional Court ruled in early 2022 (Az. 3 O 17493/20) that linking to Google Fonts from EU sites can breach GDPR by exposing the visitor's IP to a US server, and many shops have moved to self-host. Self-hosting reintroduces the extra request, and that's the request inline base64 removes.

You can do the same thing on the command line with cat font.woff2 | base64, paste the output into a @font-face block, and hand-write the format('woff2') src URL — but you'll also re-paste it every time the font, the font-family name, or any of the four font-* properties change. The tool drops that loop. The font-family text input escapes single quotes automatically so names like 'JetBrains Mono' or 'IBM Plex Sans Var' paste in cleanly.

🧐 Frequently Asked Questions

Q. When should I NOT inline a .woff2? A. Above roughly 100 KB raw, inlining starts hurting First Contentful Paint instead of helping it — the CSS bundle bloats and now blocks render itself. The tool warns at 100 KB. For larger fonts, subset with unicode-range (drop characters you never use), or keep an external url() reference and preload it.

Q. Why does base64 add ~33% to the file size? A. Base64 uses 4 ASCII bytes to represent every 3 binary bytes (6 bits per character × 4 = 24 bits = 3 bytes). On the wire, Brotli or gzip compression on the CSS bundle recovers most of the inflation — usually 10–15% net overhead after compression — but the raw payload is still larger than the binary .woff2.

Q. What's the right font-display setting? A. For body and headings, swap is the safe default: a fallback renders immediately and swaps when the web font lands. For icon-like glyph fonts, prefer block (short blocking period, then fallback). For decorative-only headings where late arrival looks worse than not loading at all, optional gives the browser permission to skip if the font misses a ~100ms budget.

Q. How do I handle bold + italic variants? A. Generate a separate @font-face block for each .woff2 file, give them all the same font-family name, and vary font-weight and font-style only. The browser picks the right one when CSS asks for font-weight: 700 or font-style: italic. For a variable font that ships multiple weights in one .woff2, write a single block with font-weight: 100 900 (range syntax).

Q. Is the inlined font cached separately? A. No — it's baked into the CSS file, so it shares the CSS file's cache lifetime. If your CSS deploys are frequent and the font rarely changes, an external url() with a long Cache-Control may win on repeat visits. Inline shines on first paint for cold visitors.

Q. Do I still need format('woff2') in the src:? A. Not strictly required for .woff2-only sites, but it lets the browser skip the data URI if .woff2 is unsupported (effectively no modern browser today, but the hint is harmless and the tool emits it).

📚 Fun Facts

.woff2 ships with Brotli-class compression baked into the container, which is why it averages ~30% smaller than .woff for the same glyph set. Web Open Font Format 2.0 hit W3C Recommendation in March 2018, and as of late 2022 it's the only format you need — IE11 fell out of Microsoft 365 in August 2021, and every other browser has shipped .woff2 since 2015.

The inline-data-URI-as-font trick predates .woff2 by years. CSS3 spec drafts in 2009 already described src: url(data:application/x-font-ttf;base64,…) for .ttf fonts, and early icon-font kits like Fontello shipped a "base64 in CSS" download option from day one. What changed with .woff2 is the size budget: at one-third the bytes of .ttf, inlining a body font finally became reasonable instead of absurd.