Why is my SVG file not using my font file?

Question

I have this SVG file in the same directory as this font's TTF file.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  version="1.1"
  width="150"
  height="100"
  viewBox="0 0 150 100"
>
  <style type="text/css">
    @font-face {
      font-family: "easyPrint";
      src: url('./easy-print.regular.ttf');
    }   
  </style>
  <text
    x="10"
    y="30"
    class="word"
    font-family="easyPrint"
    font-size="25"
  >
    TEST
  </text>
  <text
    x="10"
    y="80"
    font-size="25"
  >
    TEST
  </text>
</svg>

When I do this, I get two different fonts. The one that should be my custom font is the same font you see if you give it gibberish for a font-family. Which is different from the default.

I've tried with an OTF file as well. The specific font isn't important. I'm just trying to produce a bunch of SVG images of text with a specific font.

Answer 1

If you need your svg files to be self contained,
you should consider embedding the font-files as base64 resource (using a tool like transfonter):

1. Example: font embedded as base64

This svg would display the custom font as long as your application supports CSS (inlined svg, referenced in img element, opened directly in browser).

<p>(Letter "a" is not contained in the reduced character subset)</p>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 100">
<style>
@font-face {
    font-family: 'easyPrint';
     src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2');
    font-weight: normal;
}
  </style>
  <text
    x="10"
    y="30"
    class="word"
    font-family="easyPrint"
    font-size="25"
  >
    TESTa
  </text>
</svg>

You can significantly reduce file size by subsetting your font:
Only selected characters will be available.

If you're deploying google fonts you may also try vecta's nano optimizer which has a pretty need auto-embedding feature for publically available google fonts.

2. Example: Svg2Png

This approach requires the font to be inlined as dataURL.
Otherwise the png output will render a default font like Times.

function svg2Png(selector) {
  const svgEl = document.querySelector(selector);
  let svgVB = svgEl.getAttribute('viewBox');
  let svgVBArr = svgVB ? svgVB.split(' ') : '';
  let svgVBW = svgVBArr ? svgVBArr[2] : '';
  let svgVBH = svgVBArr ? svgVBArr[3] : '';

  let svgClientBB = svgEl.getBoundingClientRect();
  let svgClientW = svgClientBB.width;
  let svgClientH = svgClientBB.height;

  let svgBB = svgEl.getBBox();
  let svgW = svgVBW? svgVBW : svgBB.width;
  svgW = svgClientW > svgW ? svgClientW : svgW;
  let svgH = svgVBH? svgVBH : svgBB.height;
  svgH = svgClientH > svgH ? svgClientH : svgH;


  let blob = new Blob([svgEl.outerHTML], {type: 'image/svg+xml'});
  let URL = window.URL;
  let blobURL = URL.createObjectURL(blob);
  let tmpImg = new Image();
  tmpImg.src = blobURL;
  tmpImg.width = svgClientW > svgW ? svgClientW : svgW;
  tmpImg.height = svgClientH > svgH ? svgClientH : svgH;

  tmpImg.onload = () => {
    let canvas = document.createElement("canvas");
    canvas.width = svgW;
    canvas.height = svgH;
    let context = canvas.getContext("2d");
    
    // draw blob img to canvas with some delay
    setTimeout(function () {
      context.drawImage(tmpImg, 0, 0, svgW, svgH);
      let pngDataUrl = canvas.toDataURL();
      let svgImg = document.createElement("img");
      svgImg.width = svgW;
      svgImg.height = svgH;
      svgImg.class = "svgImg";
      svgImg.src = pngDataUrl;
      // just additional wrapping for example usage
      let imgWrp = document.createElement("div");
      imgWrp.setAttribute("class", "img-wrp");
      imgWrp.appendChild(svgImg);
      document.body.appendChild(imgWrp);
    }, 300);
  };
}

    svg,
        img{
            border:1px solid #ccc
        }

        .svg-wrp{
            position:relative;
            overflow:auto;
            resize:both;
            width:50%;

        }

<div class="btn-wrp">
  <button type="button" onclick="svg2Png('svg')">svg2Png</button>
</div>

<div class="svg-wrp">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 100">
<style>
@font-face {
    font-family: 'easyPrint';
     src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2');
    font-weight: normal;
}
  </style>
  <text
    x="10"
    y="30"
    class="word"
    font-family="easyPrint"
    font-size="25"
  >
    TEST
  </text>
</svg>

</div>

3. Example: create svg with text rendered as path

This example deploys the opentype.js library.
Opentype.js has a handy function font.getPath() allowing you to render string as a svg <path> element based on the before loaded font file.

let svgcontainer = document.querySelector('#svgcontainer');
let inputText = document.querySelector('#inputText');
// opentype.js accepts only ttf and otf
let fontFile = 'https://fonts.gstatic.com/s/firasans/v15/va9E4kDNxMZdWfMOD5Vvl4jO.ttf';
inputText.addEventListener('change', function(e) {
  let testString = e.currentTarget.value;
  let params = {
    string: testString,
    font: fontFile,
    fontSize: 100,
    x: 0,
    y: 0,
    decimals: 3
  }
  text2Path(params)
})

//default
let params = {
  string: inputText.value,
  font: fontFile,
  fontSize: 100,
  x: 0,
  y: 0,
  decimals: 3
}
text2Path(params)

function text2Path(params) {
  opentype.load(params.font, function(err, font) {
    if (!err) {
      let options = params.options;
      let path = font.getPath(params.string, params.x, params.fontSize, params.fontSize, options);
      let textPath = path.toSVG(params.decimals);
      let newSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
      newSvg.classList.add('svgText');
      newSvg.setAttribute('xmlns', "http://www.w3.org/2000/svg");
      newSvg.insertAdjacentHTML('beforeend', textPath);
      svgcontainer.appendChild(newSvg);

      // adjust bbox
      let bb = newSvg.getBBox();
      newSvg.setAttribute('viewBox', '0 0 ' + (bb.width + bb.x) + ' ' + (params.fontSize * 1.5));

      //add downloadbtn
      let btnDownload = document.createElement("a");
      btnDownload.setAttribute('download', 'font-' + params.string + '.svg');
      btnDownload.textContent = 'Download';
      let dataURl = getDataUrl(newSvg.outerHTML, 'image/svg+xml');
      btnDownload.href = dataURl;
      svgcontainer.appendChild(btnDownload)

    } else {
      console.log('Font could not be loaded: ' + err);
    }
  });
}

function getDataUrl(str, mime) {
  let dataUrl = 'data:' + mime + ';base64,' + btoa(unescape(encodeURIComponent(str)))
  return dataUrl;
}

.svgText {
  height: 10em;
  display: inline-block;
  border: 1px solid #ccc;
}

a {
  display: block
}

<script src="https://cdn.jsdelivr.net/npm/opentype.js@latest/dist/opentype.min.js"></script>

<div class="layout">
  <div class="frm-wrp">
    <input id="inputText" type="text" value="Test">
  </div>
  <div class="svgcontainer" id="svgcontainer"></div>
</div>

Alternative: convert text to path in graphic editor

This is probably the most convenient solution.

• Make sure the desired font is installed locally (in you OS).
• Open your svg in an graphic editor like inkscape.
• select you <text> elements and convert them to paths:
  inkscape: Path / Object to path
  Adobe Illustrator: Type / Create Outlines

File size: embedding vs. path conversion

Obviously, both approaches will significantly increase the total filesize.
Although, subset woff2 files are quite compact – an optimized path (e.g using an optimizer like SVGO/SVGOMG) usually wins this match as it doesn't require any font specific "meta" data such as metrics, kerning, naming records etc.
Worth mentioning, nowadays even budget servers support a compressed SVG file transfer (gzip, deflate etc) so we can compare the gzipped sizes.

<h3>SVG to path (5.05 KB, ~3.09 KB )</h3>
<svg xmlns="http://www.w3.org/2000/svg" class="svgText" viewBox="0 0 416.3 150"><path d="M58 100h-9.5V67.7h-29V100H10V31.1h9.5v28.8h29V31.1H58V100Zm55-12.3q0 3.2 1.1 4.8 1.1 1.5 3.3 2.3l-2.1 6.4q-4.1-.5-6.6-2.3-2.5-1.8-3.7-5.6-5.3 7.9-15.7 7.9-7.8 0-12.3-4.4-4.5-4.4-4.5-11.5 0-8.4 6-12.9 6.1-4.5 17.2-4.5h8.1V64q0-5.6-2.7-8-2.7-2.4-8.3-2.4-5.8 0-14.2 2.8l-2.3-6.7q9.8-3.6 18.2-3.6 9.3 0 13.9 4.5 4.6 4.6 4.6 13v24.1Zm-21.6 6.6q7.9 0 12.4-8.2V74h-6.9q-14.6 0-14.6 10.8 0 4.7 2.3 7.1 2.3 2.4 6.8 2.4Zm93.4-48.2q6.5 0 10.4 4.4 3.9 4.3 3.9 11.7V100h-9.2V63.5q0-10.2-7.4-10.2-3.9 0-6.6 2.3-2.7 2.2-5.8 7V100h-9.2V63.5q0-10.2-7.4-10.2-4 0-6.7 2.3t-5.7 7V100h-9.2V47.3h7.9l.8 7.7q5.9-8.9 15.2-8.9 4.9 0 8.3 2.5 3.5 2.5 5 7 3.1-4.6 6.8-7 3.8-2.5 8.9-2.5Zm56.9 0q9 0 14.3 7.3 5.3 7.2 5.3 20.2 0 8.2-2.5 14.5-2.5 6.2-7.2 9.7-4.7 3.4-11 3.4-8.3 0-14-7l-.9 5.8h-8.1V26.1l9.2-1.1v28.9q5.7-7.8 14.9-7.8Zm-3.3 47.8q6.1 0 9.5-5 3.5-4.9 3.5-15.3 0-10.7-3.2-15.4-3.2-4.8-9.1-4.8-7 0-12.3 8.2v25.2q2.1 3.3 5.1 5.2 3.1 1.9 6.5 1.9Zm77.8-46.6V100h-7.9l-.7-8.2q-3 4.9-6.9 7.2-3.9 2.2-9.5 2.2-6.9 0-10.8-4.2-3.9-4.2-3.9-11.9V47.3h9.2v36.8q0 5.4 1.9 7.7 1.9 2.2 6.2 2.2 7.7 0 13.2-9.1V47.3h9.2Zm41.9-1.2q2.8 0 5.2.6l-1.7 9q-2.4-.6-4.6-.6-4.9 0-7.9 3.6t-4.7 11.2V100h-9.2V47.3h7.9L344 58q2.1-5.9 5.7-8.9t8.4-3Zm55.5-4.7 2.7 8.3q-3 1-6.6 1.3-3.6.3-8.8.3 9.3 4.2 9.3 13.3 0 7.9-5.4 12.9t-14.7 5q-3.6 0-6.7-1-1.2.8-1.9 2.2-.7 1.3-.7 2.7 0 4.3 6.9 4.3h8.4q5.3 0 9.4 1.9 4.1 1.9 6.4 5.2 2.2 3.3 2.2 7.5 0 7.7-6.3 11.9-6.3 4.1-18.4 4.1-8.5 0-13.4-1.8-5-1.7-7.1-5.2-2.1-3.5-2.1-9h8.3q0 3.2 1.2 5 1.2 1.9 4.3 2.9 3.1.9 8.8.9 8.3 0 11.9-2 3.5-2.1 3.5-6.2 0-3.7-2.8-5.6-2.8-1.9-7.8-1.9h-8.3q-6.7 0-10.1-2.9-3.5-2.8-3.5-7.1 0-2.6 1.5-5t4.3-4.3q-4.6-2.4-6.8-6-2.1-3.5-2.1-8.6 0-5.3 2.7-9.5 2.6-4.2 7.3-6.5 4.6-2.4 10.3-2.4 6.2.1 10.4-.5 4.2-.5 7-1.5 2.7-.9 6.7-2.7Zm-24.1 11.3q-5.2 0-8 3.3-2.9 3.2-2.9 8.5 0 5.4 2.9 8.7 2.9 3.2 8.2 3.2 5.4 0 8.3-3.2 2.8-3.1 2.8-8.8 0-11.7-11.3-11.7Z"/></svg>

<h3>SVG - font embedded (1.91KB ~ 0.950 KB)</h3>
<svg  viewBox="0 0 416.3 150">
  <style>
/* text_Hamburg */
@font-face {
font-family: "Fira Sans";
font-style: normal;
font-weight: 400;
  src: url("data:font/woff2;base64,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") format("woff2");
}
  </style>
  <text y="100" font-size="100" font-family="Fira Sans">Hamburg</text>
</svg>

Font embedding in SVG

SVG won't automatically include/embed all used fonts! As mentioned before: Whether an application can handle embedded fonts heavily depends on its CSS support.
Most image viewers will fail.

Editing SVGs with embedded fonts

Usually, this won't work at all even if your using advanced editors like inkscape. Usually desktop applications rely on the system based font management so they can't access embedded font subsets in an editable mode.

You may also try to convert your svg to pdf within the browser and convert all fonts to path outlines when opening.
Inkskape (free and open source) has an option for this "Draw all text". (see also this post).