Font Base64 Encoder

The font base64 encoder reads one local font file and returns a data: URI together with the @font-face rule that consumes it. The panel states the size cost of inlining before the URI reaches a stylesheet.

What is Font Base64 Encoder?

The font base64 encoder turns a local font file into a data: URI. You pick the file with the file dialog, the browser reads it through FileReader, and the bytes come back through base64 encoding as data:<mime>;charset=utf-8;base64,... — nothing is uploaded, because the read happens on this machine. The panel reports the effective MIME type, the binary size, the base64 size with its inflation percentage and the final URI length in characters, so the cost of inlining is visible before you paste anything.

• Accepted file types: .woff2, .woff, .ttf, .otf, .eot, plus the generic font/* filter.
• MIME options: detect from extension, font/woff2, font/woff, font/ttf, font/otf.
• Extension detection maps woff2, woff, ttf and otf to their font/* types and eot to application/vnd.ms-fontobject; an unrecognised extension falls back to font/woff2.
• Outputs: a data: URI block, a usage @font-face snippet, and a CSS family name field used as the font-family in that snippet.
• Guidance panel listing the cases where inlining is worth it, and the case where it is not.

The size figures come from the encoded string rather than from a re-read of the file: the binary figure is the base64 payload length multiplied by three and divided by four, and the base64 figure is the payload length itself. That is why the reported inflation is the familiar 33.3% — base64 uses four characters for every three bytes, so a 30 KB font arrives as roughly 40 KB of text. The generated declaration pairs that data URI with font-display: swap, and the preview truncates the URI to its first 96 characters so the panel stays readable; the full string is the one printed in the URI block above it.

• One file per run. There is no batch mode, so a family with four faces means four passes.
• No subsetting and no compression: the tool encodes the file exactly as it is, and every byte you saved by removing glyphs is yours to find elsewhere.
• The usage snippet is a display convenience. Its src value is cut at 96 characters, so copy the URI from the URI panel when you paste into a real stylesheet.
• Size numbers are derived from the base64 length, not measured on disk, so they are estimates within a byte or two rather than a checksum.
• The file filter is advisory. Any file can be selected through the dialog, and nothing validates that the bytes are a font.

Inlining replaces a linked file with an inline font CSS block, and it earns its place in three situations: a subset under roughly 15 KB on the critical path, a self-contained SVG or HTML artifact that must not fetch extra files, and a template such as an email signature where external requests get stripped. It is the wrong tool for a full alphabet font, because the base64 block has to be parsed as part of the document and it bypasses the browser's normal font cache — the same face loaded by URL would be fetched once and reused instead. When the intent is self-hosting rather than inlining, the font CSS generator writes the file-based declaration and the character extractor produces the subset range that keeps the file small.

How to use Font Base64 Encoder

1. Set the CSS family name the declaration should use.
2. Leave MIME type on detect from extension, or choose the type explicitly when the file has no usable extension.
3. Choose the font file — the panel fills in the effective MIME, both sizes and the URI length.
4. Copy the data: URI block, or the usage snippet when you want the surrounding @font-face rule too.

When to use Font Base64 Encoder vs related tools

Reach for this when a font has to travel inside the document rather than beside it: a single small face on the critical path, a self-contained artifact, or a template that strips external requests. When the font is served from a directory instead, the font CSS generator writes the file-based @font-face set and the preload hint, and the @font-face declaration builder covers the single-declaration case with metric overrides. Keep the payload small first: the font character extractor produces the unicode-range list a subsetter needs, which is also what a split @font-face generator setup uses to load only the ranges a page needs.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Font Base64 Encoder