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

Flood fill graphic
The Flood Fill Algorithm in Python
Oct. 11, 2020

The flood fill algorithm has several high profile uses, most notably the bucket fill tool in image editing programs, as well as in games like Minesweeper. In this post we will go over how the tool works, as well as how to implement the algorithm.

Read More
Arc Diagram Graphic
Arc Diagrams in D3.js Part II
Sept. 7, 2020

In part II of building arc diagrams in D3.js we will build the actual diagram with data from ride hailing app trips we prepared in Part I. Drawing the arc is the most complicated part of this visualization, and we will go through it step by step.

Read More
FRED API
Accessing the FRED API with Python
Aug. 28, 2020

FRED is a database with time series data on economic indicators from a wide variety of sources. There is an API to access all of this data, and in this post I will go over a recent project where I needed to collect all of it.

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