Font to Base64

How to convert a font to Base64

1. Drop a .woff2, .woff, .ttf or .otf file on the box, or pick it with the file picker.
2. Output as is already set to CSS @font-face. Choose Data URI or Plain Base64 if you are building the rule yourself.
3. Copy output and paste it into your stylesheet.

For a file named Inter-Bold.woff2 the result looks like this, with the data shortened:

@font-face {
  font-family: "Inter-Bold";
  src: url("data:font/woff2;base64,d09GMgABAAAAA...") format("woff2");
  font-display: swap;
}

The font-family name comes from the file name, with the extension removed and characters other than letters, digits, spaces, - and _ replaced by spaces. Rename it to the family name you use in your CSS, and add font-weight and font-style if you embed several styles of one family.

format() hints and MIME types

The format() hint lets a browser skip sources it cannot use without downloading them. With a single embedded source it matters less, but a hint the browser does not recognize still makes it skip the source. The tool derives the hint from the MIME type the browser reports, and some systems report fonts with unusual types. If an OTF comes out with format("truetype"), change it to opentype.

A WOFF2 that wraps a TrueType font starts d09GMgABAAA; one that wraps CFF outlines starts d09GMk9UVE8.

Keep embedded fonts small

The Base64 is a third larger than the font file, and it sits inside render-blocking CSS. A test with a 77,160-byte icon font in WOFF2 produced 102,880 characters of Base64, all of which must download before anything on the page is drawn.

To make inlining worth it:

• Use WOFF2. For the same font it is much smaller than TTF or OTF.
• Subset the font. Removing the glyphs you do not need, for example all scripts except Latin, can shrink a large font by most of its size. Font subsetting tools do this from the command line.
• Inline only one face. A heading font or an icon font used above the fold is a good candidate. Body text in four weights is better served as separate files the browser can cache.

Self-contained HTML documents and canvas or SVG exports that must carry their own font are the typical places where an embedded font is the right call.

Checking a Base64 font

If text falls back to a default font, open the browser’s developer tools and look for font loading errors, then check that the data URI starts with data:font/ and the payload starts with one of the prefixes above. A file that starts PCFET0NUWVBF is an HTML page saved with a font extension. Base64 to Font decodes a string, previews the glyphs and saves the file.

FAQ