Webfonts sind eine Selbstverständlichkeit heutzutage. Nicht immer gelingt es uns, die gewünschte Schrift auf allen Geräten und Betriebssystemen sauber auszugeben. Es sei denn, wir hoffen das 95 Prozent der Benutzer Verdana oder Arial mögen.

Wenn eine Schrift also nicht schnell geladen wird ist die Wahrscheinlichkeit sehr hoch, dass der Benutzer die Website in Kürze wieder verlassen wird. Zurecht, benutzerfreundlich sieht anders aus.

Während die Hälfte der Website schon zu sehen ist, ist der Browser im Hintergrund noch ordentlich beschäftigt, unter anderem damit Schriften zu laden. Solange eine Schrift nicht komplett heruntergeladen ist, versteckt der Browser sie. Nach dem vollständigen Laden wird die Webschrift ausgegeben – was auch „Flash Of Invisible Text-Effekt“ (FOIT) genannt wird.

Der Nachteil: Bei einer langsamen Internetverbindung kann es passieren, dass der Benutzer keine Schrift sieht. Standardmäßig wird bei einer Ladezeit, die länger als drei Sekunden ist, eine Fallback-Schrift ausgegeben. Bei Browsern wie Safari, müssen Benutzer noch länger warten.

Um das Problem zu umgehen verwendet man zum Beispiel Javascript-basierte Lösungen, wie Font Face Observer.

Font-Display für’s Volk:

Die CSS-Eigenschaft Font-Display ist seit kurzem auch in Browsern, die auf die Blink-Engine setzen, wie Chrome und Opera, verfügbar.  Sie war zuerst nur als „experimentelles Feature“ in Chrome 49 zu nutzen, jetzt auch in Opera und Opera für Android. Mit Font-Display können Webschriften auf dem gleichen Weg ausgegeben werden wie mit Javascript basierten Lösungen, allerdings ist dafür jetzt nur noch eine Codezeile nötig.

Eingesetzt wird Font-Display in einer @fontface-Deklaration und hat vier verschiedene Werte: auto, swap, fallback und optional.

• auto:

Das ist der Default-Wert. Und macht nichts anderes als eine Standardfunktion. Der Text wird erst angezeigt, wenn die Schrift vollständig geladen ist.

• swap:

Dieser Wert wird in den meisten Fällen verwendet und kommt einer Javascript-basierten Lösung am nächsten. Er sorgt dafür, dass der Text unmittelbar mit der gewünschten Font angezeigt wird.

• fallback:

Ist der Spagat zwischen den ersten beiden Werten. Bei einer Verzögerung von 100 Millisekunden wird die Schrift nicht angezeigt, sondern auf die nächste Webschrift in der Erbfolge zurückgegriffen. Sollte zu dem Zeitpunkt die gewünschte Webschrift geladen sein, wird diese auch ausgegeben.

• optional:

Die Funktion ist dieselbe wie bei Fallback, außer das der Browser bei einer zu langsamen Internetverbindung sich dazu entscheidet, die Schrift gar nicht zu laden.

Der Nachteil an der CSS-Eigenschaft ist der geringe Support – bis jetzt. Es gibt also zwei Möglichkeiten für die Verwendung:

• Font-Display trotzdem verwenden. Wenn ein Browser die Funktion nicht unterstützt, wird lediglich der Vorteil nicht genutzt. Es wird also nichts falsch ausgegeben. Es lässt nur Benutzer, die keine Blink-Browser verwenden, zurück.
• Vorher überprüfen ob Font-Display unterstützt wird und gegebenenfalls eine Alternative stellen. Wenn es die Zeit und Ressourcen zulassen, ist das der bessere Weg.