Achten Sie darauf, dass der Text während des Webfont-Ladevorgangs sichtbar bleibt

Schriftarten sind oft große Dateien mit langen Ladezeiten. Einige Browser blenden Text aus, bis die Schrift geladen ist. Das führt zu einem Blinken unsichtbaren Texts (FOIT).

So schlägt die Prüfung der Lighthouse-Schriftarten fehl

Lighthouse meldet alle Schrift-URLs, über die unsichtbarer Text eingeblendet werden kann:

Screenshot der Lighthouse-Prüfung „Aufmerksamkeitselemente sollten beim Laden von Webfonts sichtbar bleiben“

Unsichtbaren Text vermeiden

Die font-display API gibt an, wie eine Schriftart angezeigt wird, wenn sie in einem font-face-Stil verwendet wird. Die folgenden font-display-Werte teilen dem Browser mit, eine Systemschriftart zu verwenden, wenn die benutzerdefinierte Schriftart nicht bereit ist:

  • swap
  • optional
  • fallback

CSS-Beispiel

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'),
    url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
      format('woff2');
  font-display: swap;
}

Beispiel für Google Fonts

Fügen Sie den &display=swap/&display=optional/&display=fallback-Parameter an das Ende Ihrer Google Fonts-URL an:

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
  rel="stylesheet"
/>

So vermeiden Sie Layoutverschiebungen aufgrund verzögerter Schriftarten

Wenn vorübergehend eine Systemschrift angezeigt wird, wird ein FOIT durch einen unformatierten Text (FOUT) ersetzt. Dadurch werden FCP und LCP verbessert, da Inhalte früher gerendert werden. FOIT und FOUT haben jedoch dieselbe Auswirkung auf CLS, wenn die benutzerdefinierte Schriftart die temporäre Systemschriftart ersetzt.

Die CLS-Auswirkungen des Ladens von Schriftarten können durch Vorabladevorgänge in Verbindung mit font-display: optional abgemildert werden. Eine übermäßige Verwendung von Vorabladevorgängen kann sich jedoch negativ auf die Lastmesswerte auswirken. Wir empfehlen, A/B-Tests durchzuführen, um sicherzustellen, dass durch das Vorladen von Schriftarten keine Leistungseinbußen auftreten.

Stackspezifische Anleitung

Drupal

Gib @font-display an, wenn du benutzerdefinierte Schriftarten für dein Design definierst.

Magento

Gib „@font-display“ an, wenn du benutzerdefinierte Schriftarten definierst.

Ressourcen