Salve a tutti!

Codice PHP:

...

var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" + 
"<foreignObject width='100%' height='100%'>" + 
"<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" + 
"[i]I[/i] like <span style='color:white; text-shadow:0 0 2px blue;'>cheese</span>" + 
"</div>" + "</foreignObject>" + "</svg>"; 
var DOMURL = self.URL || self.webkitURL || self; 
var img = new Image(); 
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"}); 
var url = DOMURL.createObjectURL(svg); 

img.onload = function() { 
   ctx.drawImage(img, 0, 0);
   DOMURL.revokeObjectURL(url); 
}; 
img.src = url;
... 
Questo è lo snippet. L'ho preso da developer.mozilla e praticamente serve a trasformare dell' HTML in un'immagine (lo scopo è mettere del testo in un div, fargli una "fotografia" e poi spalmarla su un canvas). Ahimè il procedimento si serve dell'SVG e le mie conoscenze di quest ultimo stanno a zero.

Ciò che voglio fare è settare un webfont che agisca sul tag div o span dentro l'svg!
Ecco il problema... ho letto che anche in svg si usa la @font-face ma non riesco ad inserirla, voglio dire, ho provato a metterla nel canonico tag style ma nulla. Qualche idea?

Ecco la font-face che sto provando ad inserire:
Codice PHP:
@font-face 
{ 
   font-family: 'Neuropol';
   src: url('font.ttf') format("truetype"); 
} 

Grazie a tutti per eventuali risposte

PS. spero di aver postato nella sezione giusta