System Fonts in SVG

Share this:

There was a time when the smart move in picking fonts for a website was to a font-family that was supported across as many platforms as possible. font-family: Tahoma; and whatnot. Or even better, a font stack that would fall back to as-similar-as possible stuff, like font-family: Tahoma, Verdana, Segoe, sans-serif;.

These days, an astonishing number of sites are using custom fonts. 60%!

No surprise, there is also a decent amount of pushback on custom fonts. They need to be downloaded, thus there are performance/bandwidth hits. There is loads of nuance on how you load them.

Also no surprise, there is some advocacy for the return to local fonts. Fast! Good enough! Let's look at that for a sec, then also look at using them within SVG.

The trend isn't just a return to local fonts but to what are being dubbed "system fonts". The point isn't so much a single font stack that looks consistent across browser/platform/version, but a single font stack that matches what that OS uses.

If the OS uses "San Francisco" in the UI, the font-stack should display San Francisco. If the OS uses Roboto, so it shall be. The actual font stack to do this is fairly thick. But that's the point, just list a bunch of fonts in the order you want to use them and CSS will fall down the stack until it finds one it has.

The title of this post is about using these font stacks in SVG. There is nothing special or different or particularly interesting about this. You can apply that font stack via CSS inside the SVG, or just put it right on a text element:

Here's a bunch of screenshots

The metrics of the different fonts are a bit different. The text fits a little tighter and looser depending on what renders. But it's not too far off. You might not set a typographic lockup with system fonts, but all in all, very usable.

👋

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress and powered up by Jetpack. It is made possible through sponsorships from products and services we like.