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

Schriftarten sind oft große Dateien mit langen Ladezeiten. In einigen Browsern wird Text erst angezeigt, wenn die Schriftart geladen ist. Das führt zu einem Flash of Invisible Text (FOIT).

So schlägt die Lighthouse-Prüfung „font-display“ fehl

Lighthouse kennzeichnet alle Schriftart-URLs, bei denen möglicherweise unsichtbarer Text angezeigt wird:

Ein Screenshot des Lighthouse-Audits „Darauf achten, dass der Text während des Webfont-Ladevorgangs sichtbar bleibt“

So vermeiden Sie die Anzeige von unsichtbarem Text

Die font-display API gibt an, wie eine Schriftart angezeigt wird, wenn sie in einem font-face-Stil verwendet wird. Mit den folgenden font-display-Werten wird der Browser angewiesen, eine Systemschriftart zu verwenden, wenn die benutzerdefinierte Schriftart noch nicht geladen 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;
}

Google Fonts-Beispiel

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

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

Layoutverschiebungen durch verzögerte Schriftarten vermeiden

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

Die CLS-Auswirkungen des Schriftartenladens lassen sich durch Preloads in Verbindung mit font-display: optional minimieren. Eine übermäßige Verwendung von Preloads kann sich jedoch negativ auf die Lademesswerte auswirken. Wir empfehlen, A/B-Tests durchzuführen, um sicherzustellen, dass das Vorladen von Schriftarten keine Leistungsregressionen verursacht.

Stack-spezifische 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