Fallback während Ladevorgang von Webfonts – font-display: swap;

Wenn wir Webfonts auf unserer Webseite einsetzen, müssen diese erst geladen werden. Was passiert aber mit der Ausgabe der Webseite, wenn der Webfonts noch nicht geladen ist. Der Browser zeigt, solange die Schrift nicht vom Webserver heruntergeladen wurde, einfach keine Textinhalte an, die diese Schrift verwenden. Nicht gerade geschickt, wenn wir eine langsame Verbindung haben.

Hier bietet uns font-display: swap; einen Fallback an, dass sofort Inhalt angezeigt wird und dann der nachgeladene Webfonts die „Übergangsschriftart“ ersetzt.

FOIT- Flash of invisible Text-Effekt

Um für das Kind auch einen Namen zu haben – der Effekt wird „Flash of invisible Text“ genannt (in Deutsch „Blitz von unsichtbarem Text“). Unser Textinhalt blitzt also erst auf, nach der Webfont geladen wurde. Als Abkürzung hört es sich natürlich schöner an: FOIT („Flash Of Invisible Text“).

Der normale Vorgang ist, wenn die Schriftart noch geladen wird, dass nach 3 Sekunden automatisch Text in der Systemschrift angezeigt wird. Dies können wir über die CSS-Anweisung font-display: swap; beschleunigen.

Schauen wir uns den Aufbau im Code an:

@font-face {
  font-family: "Open Sans Regular";
  font-style: normal;
  src: url("fonts/OpenSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

p {
  font-family: "Open Sans Regular", Helvetica, Arial, Sans-Serif;
}

In dem Beispiel verwenden wir die Schriftart „Open Sans Regular“. In unserer Fallbackangabe über font-family wird als zweiter Wert „Helvetica“ und als dritter Wert „Arial“. Es wird also Helvetica auf dem Mac und Arial auf Windows-Computern verwendet. Dieser Fallback soll aber von Anfang an greifen und dann durch die nachgeladene Schrift ersetzt werden. Daher wird bei den CSS-Schriftangaben als letzte Anweisung font-display: swap; mitgegeben

Zu beachten ist, dass die gewählte Fallbackschrift gleiche Schriftgrößen haben sollten, sonst springt das Design unter Umständen nach dem kompletten Laden.

Natürlich gibt es mehr als den Wert „swap“ bei font-display:

• auto
• swap
• fallback
• optional

Mit „auto“ kann man auch die Anweisung weglassen. Hier ist das Verhalten einfach wie im normalen Standard. Der Text wird erst nach vollständigem Laden angezeigt.

Mit „swap“ wird der Text der Website sofort angezeigt und das Design (Schriftart) nochmals geändert, wenn der Webfont nachgeladen ist.

Mit „fallback“ findet eine Verzögerung von 100 Millisekunden statt. Ist in der Zeit der Webfont geladen, wird direkt mit diesem der Text angezeigt, ansonsten übergangsweise mit der Fallback-Schriftart.

Mit „optional“ darf der Browser selbst entscheiden, ob ihm die Internetverbindung zu langsam ist und er dann keinen Webfont nutzt.

Unterstützung von allen Browsern

Die meisten aktuellen Browser unterstützen font-display: swap;. Sollte es nicht unterstützt werden, dann ist nicht viel verloren (außer die Funktion, dass schneller anzeigt wird). Daher kann man die CSS-Anweisung font-display: swap; mit guten Gewissen immer einsetzen.