🏠 back to Observable

Embedding fonts into an SVG


Thanks @mootari for: https://beta.observablehq.com/@mootari/embedding-fonts-into-an-svg, it’s very useful.

It works very well for me for the PNG export, but not for the SVG one:

Capture%20d%E2%80%99%C3%A9cran%20de%202019-02-01%2015-17-05 Capture%20d%E2%80%99%C3%A9cran%20de%202019-02-01%2015-17-19

My setup: Ubuntu 18.06, Firefox 66.0b3.

Do you have some ideas of why it could fail?

Sidenote: it’s not clear to me if this forum is only dedicated to discussions about ObservableHQ itself, or also about the content of the notebooks. If this question should go to another place, please just tell me!


On my system (macOS, firefox 65, Chrome 72, Safari 12), opening the downloaded SVG by itself in a browser displays properly, so I suspect this might be an issue with Inkscape’s handling of embedded fonts?

This SO question is a bit old, but could very well still be accurate.


You’re right, the SVG shows well when opened in the browser. But the idea of exporting SVG is to work on it for last graphic details.
It seems that Inkscape does not support embedded fonts indeed, too bad (nor do the default GNOME image viewer and GIMP)
Changing to WOFF2 does not change anything in my case.


Unfortunately I think there’s not much that can be done about it, since applications like Inkscape, GIMP, Illustrator or Affinity likely have no concept of “external / embedded” fonts that are not installed on the system.

There are some workarounds:

  1. Install the font on your computer and make sure the font names match.
  2. Convert any text to paths. There may be libraries for that.
  3. Use an editor with font-face support (e.g. macSVG) or a web based editor like Boxy SVG.
  4. Give SVG fonts a try (haven’t tested it myself).

I’ve added some notes on compatibility to the notebook and expanded the font shorthand declaration (unrecognized by some apps).


Your’re right, thanks for the details.
I understand that “4. SVG fonts” is no more an option (https://www.w3.org/TR/SVG/fonts.html and https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_fonts)


Boxy SVG seems to be a chrome based editor, not a web based editor, since Firefox is not supported :frowning_face:


I wasn’t aware. Luckily there are other options. :wink: