Font to Base64 & CSS Generator

What an inlined @font-face actually is

Inlining replaces the URL in an @font-face rule with a data: URI holding the font bytes, encoded as base64 per RFC 4648. The stylesheet stops referencing a separate file and starts carrying the font itself. Browsers treat a data: source exactly like any other: the format() hint still decides whether the entry is used, and the media type in the URI should match what you encoded, font/woff2 for WOFF2 and font/ttf for TrueType.

@font-face {
  font-family: 'Example Sans';
  src: url('data:font/woff2;base64,d09GMgABAAAA...') format('woff2');
  font-weight: 400;
  font-display: block;
}

The one-third tax

Base64 encodes every three bytes as four ASCII characters, so an encoded font is about 33 percent larger than the file it came from before any transfer compression is applied. Compressing the stylesheet claws some of that back, but never all of it, and the font bytes inside were already compressed if you encoded a WOFF2. Inlining a 90 KB web font adds roughly 120 KB to a stylesheet that previously fit in a few kilobytes.

When inlining helps

• A tiny icon font of a dozen glyphs, where one fewer request beats a few hundred extra bytes.
• A single-file HTML deliverable, a report, a slide export or an offline document that has to render correctly with no network at all.
• A build that cannot serve static assets from a second origin, or an environment where relative font URLs keep breaking.

When it hurts

• The font can no longer be cached separately. Change one CSS rule and every visitor re-downloads the font with it.
• Stylesheets are render-blocking. A font inside the stylesheet is now on the critical path, where a linked font was not.
• unicode-range splitting stops paying off, because the browser has already downloaded every range whether the page uses it or not.
• font-display has less to do. There is no separate fetch to swap in, so the tuning that hides font loading behaviour no longer applies the same way.
• Diffs and version control get unpleasant: one changed glyph rewrites a single enormous line.

Related font conversions

• TTF to WOFF2 to produce the smallest thing worth encoding.
• OTF to TTF if your source family ships PostScript outlines.
• WOFF to TTF and WOFF2 to TTF to unwrap an existing web font.
• Font availability checker to check whether you need to ship a font at all.
• Format hubs: TTF, OTF, WOFF and WOFF2.