@ font-face on the fly hinzufügen

Ich habe ein Problem mit JavaScript FileReader und / oder CSS @ font-face (oder es könnte ein HTML DOM Problem sein - nicht sicher).
Ich ziehe eine Schriftart-Datei vom Desktop und lasse sie in das Browser-Fenster mit ein wenig Hilfe von HTML5 Drag & amp; Drop, dann File -Objekt und versuchen, damit umzugehen Hier ist der JavaScript-Code, der dies tut:

Endgültiges CSS, das an head angehängt ist, sieht so aus:

Das CSS selbst fügt sich ohne Probleme an. Das Problem besteht darin, dass die Schriftfamilie nicht angewendet wird. Nach der ganzen Magie benutze ich Firebug (oder sein Chrome-Äquivalent), um die Schriftart-Familie einiger Elemente auf "myFont" zu setzen, aber es wendet Standardschriftart an (Times new roman ich denke).

Ich weiß, dass ich die Schriftart hochladen kann, um dies zu erreichen (mit PHP zum Beispiel), aber das ist nicht der Punkt.

Mögliche Frage hier könnte sein:
1. Ist es möglich, CSS-Stil im laufenden Betrieb anzuhängen und ohne Neuladen zu verwenden (wahrscheinlich TRUE, wenn es mit Firebug möglich ist)?
2. Ist es möglich, eine Schriftartdatei von einer noch nicht hochgeladenen (lokalen?) Ressource zu verwenden, wie sie von JavaScript getAsDataUrl -Funktion zurückgegeben wird (TRUE - ist es mit einer Bilddatei möglich)?
Also, beides ist unter Umständen möglich, was mache ich dann falsch? (Vielleicht Datei MIME-Typ? Beachten Sie, dass in @ Schriftart-Gesicht src Parameter "Daten:" Teil ist leer)