You are here

HOWTO: Embedding a font in a Linux Inkscape SVG document

I wanted to embed a font in an Inkscape SVG document I created in Debian Linux and was about to email to someone today. With a lot of help from the web I figured out one way to do it. Here's how… (Too many web sources to list them all, but I found http://tutorials.jenkov.com/svg/svg-and-css.html to be particularly helpful.)

There are two choices for embeddable font formats for SVG: "SVG Font" and WOFF. I chose WOFF because it was what I came to first. So, first, get yourself a copy of the sfont2woff converter—on Debian, apt-get install woff-tools—and a copy of the font you want to convert to WOFF, and run sfont2woff on your font. Make sure you know the official name of your font as used by Inkscape etc.; it will likely be different from the filename. You should now have a .woff file.

Next, get a copy of base64—part of coreutils, so probably already installed on your Debian system—and run it on your .woff file to get a BASE64 version. This is what you will be embedding. Important next step: Use tr -d '\n' to get rid of newlines in the BASE64 file. This shouldn't probably be necessary, but things won't be able to parse the file without it.

Okay, now you are ready to hack up a copy of your Inkscape document. Open it with a text editor, and just below the opening xml tag, put a style tag:

    <style>
      <![CDATA[

      @font-face {
        font-family: "...";
        src: url("data:application/font-woff;charset=utf-8;base64,...");
      }

      ]]>
    </style>

The first ellipsis "..." is the official name of your font, and the second is the actual font data from your newline-stripped BASE64 WOFF file.

Things that will deal with embedded fonts: Chrome, Firefox.

Things that won't deal with embedded fonts: CairoSVG (crashes), Inkscape (ignores them).

Things I haven't tried: everything else.

Good luck! Fob

Group/Project: