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 Schriftart geladen wird. Dies führt zu einem Flash of Unvisible Text (FOIT).

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

Lighthouse kennzeichnet alle URLs von Schriftarten, die möglicherweise unsichtbaren Text blinken:

Screenshot von Lighthouse Sicherstellen, dass der Text bei der Prüfung der Webfont-Ladevorgänge sichtbar bleibt

So vermeidest du, dass unsichtbarer Text angezeigt wird

Die font-display API gibt an, wie eine Schriftart innerhalb eines font-face-Stils angezeigt wird. Mit den folgenden font-display-Werten wird der Browser angewiesen, eine Systemschrift 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 Parameter &display=swap/&display=optional/&display=fallback am Ende der 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 Systemschrift angezeigt wird, wird FOIT durch nicht formatierten Text (FOUT) ersetzt. Dadurch wird FCP&LCP verbessert, da Inhalte früher gerendert werden. FOIT und FOUT haben jedoch beide denselben Einfluss auf CLS, wenn die benutzerdefinierte Schriftart die temporäre Systemschrift ersetzt.

Die CLS-Auswirkungen des Ladens von Schriftarten können durch Vorabladevorgänge in Verbindung mit font-display: optional abgemildert werden. Die übermäßige Verwendung von Vorabladevorgängen kann sich jedoch negativ auf die Lastmesswerte auswirken. Wir empfehlen A/B-Tests, um dafür zu sorgen, dass das Vorabladen von Schriftarten nicht zu Leistungseinbußen führt.

Stackspezifische Anleitung

Drupal

Geben Sie @font-display an, wenn Sie benutzerdefinierte Schriftarten für Ihr Design definieren.

Magento

Geben Sie @font-display an, wenn Sie benutzerdefinierte Schriftarten definieren.

Ressourcen