perky / embeddable-google-fonts

Embed google fonts in an SVG element. This allows you to have an SVG that even works offline.

Embeddable Google Fonts

Embed Google fonts inside an SVG element. This allows SVGs to use Google Fonts, even when offline. Useful for when you want to embed an SVG inside a canvas or convert to PNG.

npm install embeddable-google-fonts

Example

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" id="svg-1">
    <defs><style type="text/css"></style></defs>
    <rect x="10" y="10" width="100" height="150" fill="#a44"/>
    <foreignObject x="10" y="10" width="100" height="150">
        <div xmlns="http://www.w3.org/1999/xhtml">
            Here is a <strong style="font-family: 'Uncial Antiqua'">Google Font</strong> that is <em>embedded</em>.
        </div>
    </foreignObject>
</svg>

Make sure your SVG already has a style definition at the top.

import {embedGoogleFonts} from 'embeddable-google-fonts`;
var svgNode = document.getElementById('svg-1');
var svgStyle = svgNode.querySelector('defs > style');
embedGoogleFonts({
    fonts: ['Uncial Antiqua'],
    styleNode: svgStyle
}).then(_ => {
    console.log('Finished embedding fonts');
});