Base64 to Font

How to decode a Base64 font

1. Paste into Base64 or data URI one of: bare Base64, a data URI such as data:font/woff2;base64,d09GMg…, or CSS that contains one. With several src entries in one rule, the first data URI is used.
2. The preview shows the font with the pangram “The quick brown fox jumps over the lazy dog 0123456789” and a line with the full alphabet. Type into Sample text to try your own words.
3. The info list shows what the font file says about itself: Font family, Style, Full name, Version, Glyphs and Units per em.
4. Press Download file to save it with the extension of its format.

The status line under the info reads “Rendered with the decoded font.” when the browser accepted it. The font is registered under a private name for this page only and removed again when you decode something else; the page’s Content Security Policy allows no network traffic except Cloudflare’s page-view count, so the file goes nowhere.

Formats and what the tool reads from them

For WOFF2 the family row says “not read (WOFF2 tables are Brotli-compressed)”: the page does not unpack Brotli itself, and the browser’s font engine, which does, keeps the result to itself. The rendering is unaffected, so you can still see whether the font looks right. To read the names after saving, fc-scan from fontconfig handles WOFF2:

fc-scan --format "%{family}: %{style}\n" font.woff2

For the Material Icons font that prints Material Icons: Regular.

When the font does not render

“Your browser rejected this font. It may be damaged or not a font.” means the browser’s font sanitizer refused the file. Chrome and Firefox check every web font for structural errors before using it, and a font that was truncated, or cut out of a larger file at the wrong offset, fails that check. Compare the decoded size with the original; a Base64 string that lost its end decodes to a font with a broken last table.

If the info list shows the names but the sample stays empty, the font has no glyphs for what you typed. That happens with:

• Icon fonts: their symbols sit at private-use code points such as U+E000 and up. Fonts that use ligatures, Material Icons among them, show an icon when you type its name, for example home.
• Subset fonts: web pages often embed only the characters they need, sometimes a few dozen. Glyphs shows how many the file contains.
• Fonts for other scripts: a font made for Arabic or Devanagari may have no Latin letters.

When the data is not a font at all, the note names it: “This looks like PDF, not a font.” and so on, with a matching download button.

Where Base64 fonts come from

Most come from CSS. Build tools inline small fonts into stylesheets as data: URIs, and single-file HTML exports, offline reports and SVG files with text carry their fonts the same way. Inlining has a cost, since an embedded font cannot be cached separately from the stylesheet; data URI performance has the details. To turn a font file into such a rule, use Font to Base64.

Extract every font from a stylesheet in Python

The tool decodes the first data URI it finds. For a stylesheet with several embedded fonts, a short script saves them all with the right extension:

import base64, re

SIGNATURES = {b"wOF2": "woff2", b"wOFF": "woff", b"OTTO": "otf", b"\x00\x01\x00\x00": "ttf", b"ttcf": "ttc"}

css = open("icons.css").read()
pattern = r"data:[^;,]*(?:;[^;,]*)*;base64,([A-Za-z0-9+/=\s]+)"
for i, b64 in enumerate(re.findall(pattern, css)):
    data = base64.b64decode(b64)
    ext = SIGNATURES.get(data[:4], "bin")
    with open(f"font-{i}.{ext}", "wb") as f:
        f.write(data)
    print(f"font-{i}.{ext}", len(data), "bytes")

The extension comes from the first four bytes because stylesheets often label fonts loosely (application/font-woff, application/octet-stream). More on Base64 in Python.

FAQ