title: Including fonts when converting SVG to PNG
body: <p>I am trying to generate some SVG and allow users of my website to download these SVGs as PNGs.<br>
  After reading <a href="https://stackoverflow.com/questions/34042910/convert-svg-to-png-with-applied-images-as-background-to-svg-elements">this</a> I get all my external images included in the downloaded PNG.<br>
  Now I am trying to get the fonts on the PNG correct. <a href="https://stackoverflow.com/questions/41571622/how-to-include-css-style-when-converting-svg-to-png?noredirect=1&amp;lq=1">This</a> seems to answer that and so I added:</p>
  
  <pre><code>&lt;defs&gt;
      &lt;style type="text/css"&gt;
          @font-face {
              font-family: Parisienne;
              src: url('data:application/font-woff;charset=utf-8;base64,.....')
          }
      &lt;/style&gt;
  &lt;/defs&gt;
  </code></pre>
  
  <p>Where <code>.....</code> is base64 encoded woff2 font. And then used it in text like so:</p>
  
  <pre><code>&lt;text x="55" y="55" stroke="red" font-family="Parisienne"&gt;Blah&lt;/text&gt;
  </code></pre>
  
  <p>The font gets displayed in the browser correctly (I haven't installed it on my OS), however it is still not included in the PNG.<br>
  Do I have to add some additional processing to the script I used from the first link?<br>
  Thanks.  </p>
  
  <p>--EDIT--<br>
  I have been asked for a complete example, here it is:  </p>
  
  <pre><code>&lt;svg id="generated-svg" class="generated-svg" width="300px" height="500px"
      version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns-xlink="http://www.w3.org/1999/xlink"&gt;
    &lt;defs&gt;
      &lt;style type="text/css"&gt;
        @font-face {
          font-family: Parisienne;
          src: url('data:application/font-woff;charset=utf-8;base64,.....')
        }
      &lt;/style&gt;
    &lt;/defs&gt;
  
    &lt;rect width="300" height="500" fill="#222"/&gt;
    &lt;text x="55" y="55" stroke="red" font-family="Parisienne" font-size="20px"&gt;Test text&lt;/text&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>I haven't added the base64 encoded font as it's simply too big. But you can encode any font you like and replace the <code>......</code>. I am using <a href="https://fonts.google.com/specimen/Parisienne" rel="nofollow noreferrer">Parisienne</a>.<br>
  Here is working jsfiddle with the actual font: <a href="https://jsfiddle.net/z8539err/" rel="nofollow noreferrer">https://jsfiddle.net/z8539err/</a>
  In my browser this is the output:<br>
  <a href="https://i.stack.imgur.com/0Zy5f.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0Zy5f.png" alt="output of jsfiddle"></a></p>
  
  <p>Whilst after using the download script above I would end up with:
  <a href="https://i.stack.imgur.com/DUEjS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DUEjS.png" alt="downloaded image"></a></p>