How to embed a Google Font into an SVG

Lorem Ipsum with various Google Fonts

If you're working with SVG to create graphics or data visualizations, you might find yourself wanting to branch out from the usual system fonts like Times New Roman or Helvetica and use something interesting you find on Google Fonts, or a custom font from some other source.

The problem I ran into was that I had an SVG-based visualization in D3.js and wanted to save it as a .png file as well, but the font was not being preserved in the saved file.

In this post I'm going to go over how I embedded the font into the SVG with base64 encoding so that it would be preserved when saving as a .png.

Ice Cream Map With Google Font Lalezar

This graphic uses the Lalezar font from Google Fonts, which has been preserved here and is showing correctly.


But initially when I saved it, the custom font wasn't preserved and it looked like this:

Ice Cream Map with system font Instead of custom font after saving as png.

Nice!

I had simply put a link to the font source in my HTML file and then declared the font-family in the CSS, which worked fine for rendering in the browser, but not when saving as a file.

To preserve custom fonts when saving the file, we need to take a couple of extra steps.

  1. Get the WOFF2 font source file and convert it to base64 encoding.
  2. Embed the encoded font source into the SVG with a data URL.

It's pretty straightforward to do.

Pick a font, any font!

As mentioned, I'm using the Lalezar font from Google Fonts.

You can substitute your preferred font.

We need to embed the base64-encoded font source into the SVG with a defs element, where we will then add the CSS to load the font.

<defs>
    <style>
        @font-face {
                font-family: 'Lalezar';
                font-style: normal;
                font-weight: 400;
                src: local('Lalezar'), local('Lalezar-Regular'),
                url(data:font/woff2;base64,BASE_64_STRING_GOES_HERE) format('woff2');
                unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
    </style>
</defs>

We have the data url with mimetype font/woff2 which allows us to embed the font inline.

The BASE_64_STRING_GOES_HERE is a very long base64-encoded string.

Luckily there are tools available so that it is just a matter of copy and pasting the CSS into the document.

Convert the font to base64

The font can be converted to base64 at this link.

To convert it you need the URL for the CSS of the font - for Lalezar you can find it here.

If you visit that URL you will indeed find a style sheet with source files to the woff2 file for the font, which is what we need to encode.

This font is available for Arabic, as well as Latin characters, and I only want the Latin, so I just had to sift through the output to extract the Latin part.

Then just copy and paste that directly into the code above, and the font should display and be preserved in your SVG!

In D3.js it looks something like this

svg.append('defs')
    .append('style')
    .attr('type', 'text/css')
    .text("COPY_PASTE_GOES_HERE");

Thanks for reading!

Let me know if you have another solution for this problem!

If you have any questions or comments, write them below or reach out on Twitter @LVNGD.

blog comments powered by Disqus

Recent Posts

spotify_cover.jpg
Accessing the Spotify API with Python
Dec. 13, 2020

You can do a lot of interesting things with the Spotify API, like searching for artists and playlists, following and sharing them, and more. In this post we will access the API using Python to get featured playlists and associated artists and genres.

Read More
picto_sm_sharp.png
Building Pictogram Grids in D3.js
Nov. 22, 2020

Pictograms have been around for a long time, and with good reason. They are interesting and engaging, and might even help your audience to remember the information better. In this post we will build a pictogram grid in D3.js.

Read More
Playing Minesweeper graphic
Solving Minesweeper in Python as a Constraint Satisfaction Problem
Nov. 15, 2020

Let's play Minesweeper in Python. In this post we will treat Minesweeper as a constraint satisfaction problem and use common algorithms like constraint propagation and backtracking search to mimic logic we would use to play the game as humans.

Read More
Get the latest posts as soon as they come out!