Search code examples
svgfontsdata-conversionlibrsvgrsvg

How to embed font in svg for `rsvg-convert` to use it?


I'm trying to use rsvg-convert as a command line tool to convert svgs to pngs, and it works except for the fonts. None of the ways I've tried to link or embed a font into the svg seem to work for libRsvg to see it in the rendering process.

The way I set things up at first had the font as a local woff2 file linked in the css @font-face. This worked as I was using a web browser (macOS Safari) to view the svgs in progress. But now I want to convert to png, this method doesn't seem to work.

For completeness, here's a minimal example:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 20 20" width="100px" height="100px">
  <style type="text/css">
    @font-face {
      font-family: "Valkyrie";
      font-style: normal;
      font-weight: normal;
      font-stretch: normal;
      font-display: auto;
      src: url("./.font/valkyrie/valkyrie_ot_a_regular.woff2") format("woff2");
    }
    text {
      font-family: "Valkyrie";
    }
  </style>
  <text x="0" y="0" font-size="10" text-anchor="middle" dominant-baseline="central">ABC</text>
</svg>

Second, I tried embedding the font in base64 form; same as above but with the @font-face src attribute line as this (where "[...]" is replaced with the base64 text converted via this tool):

src: url("data:application/octet-stream;base64,[...]") format("woff2");

This, again, works in the browser but not in conversion.

At this point I'm not sure where in the process I'm going wrong.

Further information: I'm on macOS, using librsvg via Homebrew, and I have other formats (otf, ttf) for the fonts I'm using, in case woff2 doesn't work here.


Solution

  • What ended up working was:

    Remove the whole @font-face declaration and install the otf version of the font at the macOS level. This lets librsvg see the font in a way it couldn't with the local font file, it seems.