title: Converting SVG to PNG without changing the font
body: <p>I'm trying to make a simple app which takes text from users and edit the text in svg file (generated from illustrator) and sends back to the user with the final result.</p>
  
  <p>I'm able to change the SVG file text in javascript but I'm having problems with converting it to png. When I do, it changes to a different roboto like font.</p>
  
  <p>Here is my svg</p>
  
  <pre><code>&lt;svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2248.1 769.99"&gt;
      &lt;defs&gt;
          &lt;style&gt;
              .cls-1{
                  font-size:350px;
                  font-family:Granger-Regular, Granger;
              }
          &lt;/style&gt;
      &lt;/defs&gt;
      &lt;title&gt;test&lt;/title&gt;
      &lt;text class="cls-1" x="50%" y ="50%" &gt;
          &lt;tspan  text-anchor="middle"&gt;Example&lt;/tspan&gt;
          &lt;tspan  text-anchor="middle" x="50%" y ="50%" dy="300"&gt;SVG&lt;/tspan&gt;
      &lt;/text&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Here is the code I'm using to convert,</p>
  
  <pre><code>var fs = require('fs')
    , gm = require('gm');
  
  gm('./../src/images/test.svg')
      .write('./../src/images/test.png', function (err) {
          //console.log(err)
          if (!err) console.log('done');
      });
  </code></pre>
  
  <p>Svg looks something like this,</p>
  
  <p><a href="https://i.stack.imgur.com/drEnY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/drEnY.png" alt="enter image description here"></a></p>
  
  <p>But when I convert it looks like this,
  <a href="https://i.stack.imgur.com/L7IJ5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L7IJ5.png" alt="enter image description here"></a></p>
  
  <p>So how can I fix it? :(</p>