✔ Überprüfung ob Google Webfont geladen wurde

[NikderFrischling]

Hallo zusammen, ich sitze momentan an einem kleinen Problem, das ich nicht gelöst bekomme.
Ich habe ein Formular, in das der Nutzer einen beliebigen Google Webfont eintragen kann und der wird dann auf der Seite benutzt. Jetzt hätte ich gerne eine Fehlermeldung, wenn der Nutzer einen ungültigen FontName einträgt, wie zum Beispiel "blabla". Dieser Font existiert nicht und wird dementsprechend auch nicht angezeigt. Gibt es eine Möglichkeit, wie ich beim Klick auf einen Button überprüfen kann, ob der Webfont überhaupt existiert? Zurzeit binde ich die Google Webfonts per Javascript so ein:

function addGoogleFont(FontName) {
    $("head").append("<link href='https://fonts.googleapis.com/css?family=" + FontName + "' rel='stylesheet' type='text/css'>");
}

Ich würde nun gerne in dieser Funktion vorher eine Abfrage haben, ob der Font überhaupt verfügbar ist. Es kann ja auch schon einmal zu Tippfehlern kommen und der Font deswegen nicht erkannt wird.

Hat jemand eine Idee oder einen Tipp wie ich das lösen kann?

Gruß
Niklas

 

[Quaese]

Hi,

vielleicht hilft dir der WebFont Loader weiter. Der inactive-Event scheint zu feuern, wenn der Browser den Font nicht unterstützt oder der Font nicht geladen werden konnte.

Ciao
Quaese

 

[NikderFrischling]

Hallo Quaese, danke für den Tipp. Aber ich möchte den Webfont Loader nicht verwenden.
Ich habe schonmal überlegt, ob man den HTML Request 400 nicht irgendwie nutzen kann, damit dann ein alert-Fenster o.Ä. erscheint um den Nutzer auf den Fehler aufmerksam zu machen.

 

[NikderFrischling]

Ich konnte das Problem mit einem Ajax-Request lösen

eigentlich ganz easy:

function addGoogleFont(FontName) {
    var schrift = FontName;
    var request = new XMLHttpRequest();
    request.open('GET', 'https://fonts.googleapis.com/css?family=' + schrift + '', true);
    request.send(null);
    request.onreadystatechange = function () {
        if (request.readyState === 4) {
            if (request.status === 200) {
                $("head").append("<link href='https://fonts.googleapis.com/css?family=" + FontName + "' rel='stylesheet' type='text/css'>");
                console.log("erfolgreich");
            }
            else {
                alert("Die angegebene Schriftart existiert nicht! Bitte versuchen sie es erneut!");
                document.getElementById('schriftart_eigen').focus();
            }
        }
    }
}