Embed a font as a CSS data URI
Base64 a font file into a self-contained `@font-face` rule, no separate file to host, at the cost of the file growing about a third larger as text. Fine for a small icon font, wasteful for a large family.
Embed a font as a CSS data URI turns a font file into one base64-encoded @font-face block, with the format guessed from the file's magic bytes rather than its name. Leave family blank and it uses the font's own name, falling back to CustomFont. The output grows about a third larger as base64 text than the original binary.
Questions
How is the font format detected?
By reading the first four bytes of the file itself, its magic bytes, rather than trusting the file extension: wOFF becomes WOFF, OTTO becomes OpenType, and the sfnt version bytes for TrueType are matched directly; a WOFF2 file never reaches this check, since the font parser it depends on cannot decompress WOFF2 and rejects it earlier.
What happens if I leave family blank?
The tool reads the font's own family name out of its name table and uses that; if the font has no family name set at all, it falls back to the literal name CustomFont.
How much bigger does the output get?
About a third larger than the original binary font file, since base64 encoding always expands binary data by roughly that ratio; there is no compression step to offset it.
What does the generated CSS contain?
One @font-face rule with the family name, a src url pointing at a base64 data URI in the detected format, and font-weight and font-style both set to normal; there is no option to set a different weight or style.
Is this a good fit for a large font family?
Not particularly, by the tool's own description: the roughly one-third size increase from base64 makes it a reasonable choice for a small icon font and a wasteful one for a large multi-weight family, where hosting the font as a separate file stays smaller.
Compare
| Tool | Runs on the CLI | Live as you type |
|---|---|---|
| Embed a font as a CSS data URI | Yes | No |
| Convert a font to OTF | Yes | No |
| Subset a font to specific characters | Yes | No |
| Render a font specimen sheet | Yes | No |
| Export font glyphs as SVG | Yes | No |
| Convert text to an SVG path | Yes | No |
| Turn an icon font into an SVG sprite | Yes | No |