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

This has been already asked a few times, but never really as precise as it about Google Fonts.

So the general ideas are that :

• To draw an svg on a canvas, we need to load it in an element first.
• For security reasons, inner documents can not make any external requests.
  This means that you'll have to embed all your external resources as dataURIs inside your svg markup itself, before loading it to the element.

So for a font, you'll need to append a