title: Converting SVG that uses Google Fonts to Canvas using Blob
body: <p>I have an SVG displayed on a page that uses Google Fonts.</p>
  
  <p><code>&lt;text&gt;</code> node on the SVG inherits Google Font nicely.</p>
  
  <p>Now, I'm trying to convert the SVG using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob" rel="nofollow noreferrer"><code>Blob</code></a>.</p>
  
  <p>This works, except <code>&lt;text&gt;</code> is rendered using fallback "Verdana", which is installed on browser machine, not "Pacifico" which is a dynamically-loaded Google Font.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = function() {
    var width = 400;
    var height = 100;
  
    var DOMURL = self.URL || self.webkitURL || self;
    var data = new XMLSerializer().serializeToString(document.getElementById("test"));
  
    var svg = new Blob([data], { type: "image/svg+xml" });
    var url = DOMURL.createObjectURL(svg);
  
    var canvas = document.getElementById("result");
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext("2d");
  
    var img = new Image(width, height);
    img.onload = function() {
      ctx.drawImage(img, 0, 0);
      DOMURL.revokeObjectURL(url);
    }
    img.src = url;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css?family=Pacifico');
  body {
    font-family: Pacifico, Verdana;
    font-size: 15px;
  }
  body * {
    font-family: Pacifico, Verdana;
  }
  
  #test, #result {
    border: 1px solid #eee;
  }
  
  h4 {
    margin: 2em 0 1em 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h4&gt;Source SVG&lt;/h4&gt;
  &lt;svg id="test" width="400px" height="100px" style="font-family: 'Pacifico', 'Verdana'; font-size: 15px;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
    &lt;g xmlns="http://www.w3.org/2000/svg"&gt;
      &lt;rect fill="#67b7dc" transform="translate(-0.5,-0.5)" width="80" height="100" /&gt;
      &lt;rect fill="#6794dc" transform="translate(80,0)" transform="translate(-0.5,-0.5)" width="80" height="100" /&gt;
      &lt;rect fill="#6771dc" transform="translate(160,0)" transform="translate(-0.5,-0.5)" width="80" height="100" /&gt;
      &lt;rect fill="#8067dc" transform="translate(240,0)" transform="translate(-0.5,-0.5)" width="80" height="100" /&gt;
      &lt;rect fill="#a367dc" transform="translate(320,0)" transform="translate(-0.5,-0.5)" width="80" height="100" /&gt;
      &lt;text fill="#fff" transform="translate(20,20)" font-size="25" dy="20"&gt;
        Some text using font&lt;/tspan&gt;
      &lt;/text&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
    
  &lt;h4&gt;Result canvas&lt;/h4&gt;
  &lt;canvas id="result" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So far I haven't been able to find a way to make canvas text use custom font, and would appreciate any help with that.</p>
  
  <p>P.S. For the record, I know about existence of 3rd party libs like fabric and canvg. They are able to convert SVG to Canvas without losing custom fonts. However, I'm trying to get away with not using any 3rd party libs, to keep it light.</p>
  
  <p>P.P.S. Including Google Fonts' <code>@import</code> into <code>&lt;defs&gt;&lt;style&gt;</code> section of the SVG does not help, even if we explicitly define <code>@font-face</code>. And frankly that would not be an option, since I don't yet know with what fonts the library will be used.</p>
  
  <p>P.P.P.S Delaying export does not help, so it's probably not a timing issue, either.</p>