How to use Google fonts in Canvas when Drawing DOM objects in SVG?

Question

As per Mozilla\'s documentation, you can draw complex HTML on Canvas like this.

What I can\'t figure out is a way to make Google fonts work with it.

Answer 1

The first thing you can try is to use Google web font loader because you are generating the svg before the font is loaded by the browser

so you need to make sure that the fonts are loaded and then generate the svg/image

if that doesn't work you can create text tags in your svg and try these alternatives for fonts https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_fonts