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

D3 Data Join
Data Joins in D3
March 10, 2021

Data joins in D3 can be a tricky thing to wrap your mind around, but once you do, you can take your visualizations to the next level with animations. Data joins are a core concept in D3, so it's a good idea to get acquainted with them.

Read More
rectCollideBlogCover.png
Rectangular Collision Detection in D3 Force Layouts
Feb. 4, 2021

D3 has a built-in force to detect circle collisions in force layouts, but what if you're working with rectangles? In this post we will go over how to detect and resolve collisions, and then adapt D3's built-in forceCollide to work on rectangles.

Read More
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
Get the latest posts as soon as they come out!