In diesem Vortrag taucht Monica Dinculescu tief in Webfonts ein und wie die CSS-Eigenschaft font-display uns erlaubt, die Art und Weise zu steuern, wie diese Schriften gerendert werden. Sie argumentiert, dass es eine Menge enormer Performance-Gewinne gibt, wenn wir uns nur ein wenig Zeit nehmen, über die Gesamtzahl der geladenen Schriften und deren Ladeverfahren nachzudenken.
Außerdem hat Monica eine praktische Demo erstellt, die eine noch detailliertere Reihe von Beispielen dafür liefert, wie die font-display-Eigenschaft funktioniert.
Dies hängt stark davon ab, wie Sie Ihre Webfonts verwenden und ob das Rendern des Textes in einer Fallback-Schrift sinnvoll ist. Wenn Sie beispielsweise den Haupttext einer Website rendern, sollten Sie font-display:optional verwenden. Auf Browsern, die dies implementieren, wie Chrome, wird das Erlebnis viel angenehmer sein: Ihre Benutzer erhalten schnell Inhalte, und wenn der Download des Webfonts zu lange dauert, erhalten sie keine Seitenneuanordnung mitten beim Lesen Ihres Artikels.
Wenn Sie einen Webfont für Icons verwenden, gibt es keine akzeptable Fallback-Schrift, in der Sie diese Icons rendern können (es sei denn, Sie verwenden Emoji oder Ähnliches), daher bleibt Ihnen nur die Option, vollständig zu blockieren, bis die Schrift bereit ist, mit font-display:block.