Seeing Veiled Georgia

You can use SVGs inline in HTML, like a regular image, or outside of a browser entirely.

Regardless, when SVGs contain fonts, they are still subject to one point of the same points of confusion as with fonts on the web in general. That is: other people don’t have the same fonts installed as you.

Let’s say a designer using prepares an SVG, containing your font. Instead of converting to outlines, they have the “Font” settings as “SVG” in Illustrator (or the equivalent, in whatever program they are using).

Using Extraordinaire as my example, this is the font the designer has installed on their own computer:

A screenshot of an SVG showing white text saying “Scalable Vector Graphics,” set in the deco typeface “Extraordinaire,” on a dark grey background.

While I think we can all agree that everyone should be signed up for DJR’s Font of the Month Club, we can’t assume that everyone is (or has everything released since 2018 [!] actively installed on all of their devices).

The SVG will have the appearance of correctly using Extraordinaire on their own machine, but if they haven’t converted the text to outlines, no one else will be able to see it. Everyone else will see this:

The same SVG, showing the text in a fallback font, running off the right side of the image.

It will work exactly like a website with the same mistake, with CSS like this:

font-family: Extraordinaire, Arial, sans-serif;

In fact, that’s pretty much what’s happening in the SVG, too, which also uses font-family—regardless of whether you use the SVG in the browser or not.

If you open the SVG in a text editor, you’d see this:

<text fill="white" font-family="Extraordinaire-Bold, Extraordinaire" font-size="50" font-weight="bold">Scalable Vector Graphics</text>

Here, Extraordinaire-Bold and Extraordinaire are two different ways of referencing the same local font. Since we’ve exported this from a design tool, it’s not going to fill in any fallback fonts either—so we fallback to the browser default font when the SVG is shown in the browser.

Everything else stays the same: the coordinates, the font weight is bold, and the font size is based on what was appropriate for Extraordinaire. Except the font is not what we expected.

And that—with apologies to DJR—is how we end up with an SVG that our designer thinks is set in Extraordinaire, but is actually set in a system fallback font like Times or Georgia.

Until next time,
Kenneth

Get my next article by email