Compile SVG to embed glyphs

Question

I have an SVG in a webpage that includes text rendered with a custom font. Something like:

<style>
  @font-face {
    font-family: MyFont;
    src: url(font-files/MyFont.woff2);
  }
</style>

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="55"
     height="37">
  <defs/>
  <g>
    <text fill="#000000"
          stroke="none"
          font-family="MyFont"
          font-size="50px"
          font-style="normal"
          font-weight="normal"
          text-decoration="normal"
          x="-1"
          y="32"
          text-anchor="start"
          dominant-baseline="alphabetic">
      FooBar
    </text>
  </g>
</svg>

I'd like to export the SVG as a standalone file, without the font file. Either by embedding the font file (if that's possible) or by enumerating the paths and splines.

I want to keep it as a vector graphic. I don't want to rasterize.

Answer 1

There are no built-in browser methods which allow you to do that.

However there are some third-party JS libraries for reading font files and retrieving the glyph outlines. For example:

• https://github.com/mattdesl/fontpath
• https://github.com/opentypejs

As long as your <text> elements are simple, the JS to convert your text to matching outlines should be fairly simple.