Creating Embeddable Fonts as Data URIs

SVG 1 defined <font> and <glyph> elements that allowed you to include a custom font within an SVG file. That way, you could create graphics using real, accessible text, while still ensuring a guaranteed rendering of each letter, without any dependencies on separate font files.

But SVG fonts had their own problems, and they have very poor browser support on the web.

Today, the best approach for embedding fonts directly in your SVG file is to use an OpenType-compatible web font, converted to a data URI, as the src URL in a CSS @font-face rule.

Nonetheless, think carefully before using a data URI font on the web. Embedding a font means that the font data cannot be shared between multiple web pages or SVGs. The data needs to be downloaded with each file that uses it, and the SVG cannot be fully parsed and displayed until the font is downloaded. And you can’t give browsers a choice of which format to download—because they’ve downloaded it already—which means that you’ll probably have to use an older format, with better browser support but larger file sizes (e.g., WOFF instead of WOFF2).

If you do decide to embed a font, you’ll need to do the processing yourself. Most graphics editors now have settings to embed raster images as data URIs, but their font embedding options currently rely on (poorly supported) SVG fonts. You’ll need two sets of tools:

A font-subsetting and conversion tool

Two options are FontFont’s Subsetter (which currently only works with WOFF files), or Font Squirrel’s Webfont Generator (which also creates WOFF from other font formats).

Select the letters and OpenType features (e.g., ligatures) that you’re using. Both tools have options to allow you to copy and paste the specific text you want to display in this font:

• In FontFont Subsetter, use the “Expert Subsetting” option, then use the “Minimal containing Characters” option.

• In Font Squirrel, use the “Expert” generator option, then scroll down to “Subsetting”, select “Custom” and use the “Single Characters” field.

Save the output font as a .woff file—or WOFF2, if you’re from the future where you don’t need to support older browsers anymore.

A base64 data URI converter

There are lots of online options, although not all of them support font files (The data: URI kitchen does). You might also have a converter as part of your website’s build tools. Alternatively, Font Squirrel can output a CSS file containing data URIs—and the rest of the @font-face rule—as one of its “Expert” options.

Whatever you use: upload the subsetted WOFF file, and the tool should create a string starting with the following:

data:application/font-woff;base64,

…and ending with something that looks like a cat walked across your keyboard.

Carefully copy and paste the generated data URI into the src URL of your @font-face rule:

<style type="text/css">
@font-face {
    font-family: "Incredible Font";
    font-weight: bold; /* descriptors should match your styles */
    src: url("/*data URI goes here*/") format(woff);
}
</style>

Data URI fonts have the benefit that—in most browsers—they can be used, even in SVG used as an image (<img> sources, or CSS background-image). Images do not trigger downloads of additional asset files, so separate font files will never load in these situations.

Even in browsers that use a data URI font in an image, the text in an <img> or CSS image won’t be accessible from the main web page. For accessible text, use inline SVG or embedded objects.