Wofür benötige ich die CSS Eigenschaft font-display?

Heutzutage kann man sich Schriften abseits der Systemschriftarten nicht mehr wegdenken. Ich muss zugeben, dass ich auch ein Fan von Google Webfonts (lokal eingebunden) bin. Aber es gibt eine Einstellung beim Einbinden von Schriften via @font-face, die man nicht außer Acht lassen sollte. Und zwar ist es die Eigenschaft „font-display“.

Diese Eigenschaft definiert, wie die Schrift (die meist am Zielsystem nicht installiert ist), geladen werden soll.

Einstellmöglichkeiten

• auto (Standard): Browser entscheiden selbst, meist ist es gleich „block“
• block: Sagt dem Browser, er soll warten mit dem Anzeigen der Schrift, bis sie geladen ist. Der Browser zeigt also eine Unsichtbare Schrift an während er die Schrift lädt. Diesen Effekt nennt man FOIT „flash of invisible text“.  Das kann den User stören und Google findet es nicht gut, da man den Inhalt nicht lesen kann
• swap: Die Schrift wird sofort angezeigt und geändert wenn die Webfont fertig geladen wurde. Dies verursacht FOUT „flash of unstyled text“
• fallback: Es findet eine Verzögerung von 100ms statt. Wenn die Font dann geladen ist wird sie direkt angezeigt ansonsten die Fallback-Schriftart
• optional: Browser entscheidet selbst ob er die Font überhaupt lädt (je nach Internetverbindung)

Empfehlung

Ich empfehle immer swap zu verwenden, da es im schlimmsten Fall bei dem ersten Aufruf der Website zu einem FOUT kommt. Achtung: kommt es zu einem FOIT zählt Google es zu einem "Fehler" bzw. "Warnung" bei ihrem Pagespeed test. Genau deshalb habe ich diesen Artikel verfasst.