Maintain Font coverting SVG to Canvas

If you notice your font has tranformed to Times when turning a SVG into a canvas, this will demonstrate how to protect that font.

HTML

<div>
    <p>
        Since one can't right click and save an SVG as a png, the SVG needs to be converted to an image and then rendered on a canvas. 
        The library <a href="https://github.com/hongru/canvas2image">canvas2Image</a> is excellent for such juggling.
    </p>
    <p>
        I discovered that my font went missing and was replaced by Times New Roman during the process of converting a SVG to an img. 
        After some research, <a href="http://graphicdesign.stackexchange.com/questions/5162/how-do-i-embed-google-web-fonts-into-an-svg">this article</a> 
        explained that the font needs to be base64 encoded and I found that <a href="http://www.fontsquirrel.com/tools/webfont-generator">fontsquirrel.com</a> 
        offers this as "Expert" feature that you need to enable.
    </p>
    <p>
        While this base64 solution works, I'm not satisfied with it as I believe it would be easier to maintain and read 
        if one could link to an external .woff file in one line instead of the million line bloat required by the base64 encoded string.
    </p>
</div>


<section id="svg">
    <h2>svg</h2>

    <svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="150">
        <defs>
            <style>
                @font-face {
                    font-family: 'Exo 2 linked';
                    src: url('https://fonts.gstatic.com/s/exo2/v4/7cHmv4okm5zmbtYoK-g.woff') format('woff');
                    font-weight: normal;
                    font-style: normal;
                }
                /* https://www.fontsquirrel.com/tools/webfont-generator */
                @font-face {
                    font-family: 'Exo 2 embedded';
                    src:...

CSS

body {
    font-family: 'Droid Sans Mono', Helvetica, sans-serif;
    font-size: 14px;
    color: #666;
}

svg, img, canvas {
    box-shadow: 1px 1px 2px 2px silver;
}

Babel + JSX

(function() {
    "use strict";

    function $$(selector, context) {
        return (context || document.body).querySelector(selector);
    }


    const svg = $$('#svg svg'),
          img = $$('#img img'),
          canvas = $$('#canvas canvas');

    const sml = new XMLSerializer().serializeToString(svg),
          imgData = 'data:image/svg+xml;base64,' + btoa(sml);

    img.onload = function() {
        canvas.width  = img.naturalWidth  || img.width;
        canvas.height = img.naturalHeight || img.height;

        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0,0);
    }
    img.setAttribute("src", imgData);

})();