Unsichtbaren Text beim Laden von Schriftarten vermeiden

Katie Hempenius

Barry Pollard

Warum ist das wichtig?

Schriftarten sind häufig große Dateien, deren Laden eine Weile dauern kann. Um dieses Problem zu umgehen, blenden manche Browser Text aus, bis die Schriftart geladen wird (das „Blitz des unsichtbaren Textes“).

Beim Largest Contentful Paint (LCP) kann es beim Warten auf das Rendern von Text zu Verzögerungen kommen. Wenn Sie die Leistung optimieren, empfiehlt es sich, das „Blinken von unsichtbaren Texten“ (FOIT) zu vermeiden und Nutzern Inhalte mithilfe einer Systemschriftart sofort zur Verfügung zu stellen, wodurch ein „Unformatierter Text aufblinken“ (FOUT) entsteht.

Browser-Standardeinstellungen für die Anzeige von Schriftarten

Dies sind die Standardverhalten für das Laden von Schriftarten in gängigen Browsern:

Text sofort anzeigen

In diesem Leitfaden werden zwei Möglichkeiten beschrieben, Text so schnell wie möglich anzuzeigen: Die erste Methode ist einfach und bietet eine gute Browserunterstützung. Der zweite Ansatz ist detailliert, bietet Ihnen aber möglicherweise weitere Optionen. Die beste Wahl für Ihre Website hängt von Ihren Anforderungen ab.

Option 1: font-display verwenden

font-display ist eine API zum Festlegen einer Strategie für die Darstellung von Schriftarten. swap weist den Browser an, Text in dieser Schriftart sofort in einer Systemschriftart anzuzeigen. Sobald die benutzerdefinierte Schriftart fertig ist, wird die Systemschriftart ausgetauscht.

/* Before */
@font-face {
  font-family: Helvetica;
}

/* After */
@font-face {
  font-family: Helvetica;
  font-display: swap;
}

Wenn ein Browser font-display nicht unterstützt (obwohl alle modernen Browser das tun), verwendet der Browser weiterhin sein Standardverhalten zum Laden von Schriftarten.

Option 2: Benutzerdefinierte Schriftarten erst nach dem Laden verwenden

Mit etwas mehr Arbeit kann ein stärker kundenspezifischer Ansatz in Betracht gezogen werden.

Dieser Ansatz besteht aus drei Teilen:

• Verwenden Sie beim ersten Seitenaufbau keine benutzerdefinierte Schriftart, indem Sie Ihr CSS so umgestalten, dass am Anfang keine benutzerdefinierten Schriftarten verwendet werden. Dadurch wird sichergestellt, dass der Browser Text sofort in einer Systemschriftart anzeigt.
• Mit der CSS Font Loading API erkennen, wann Ihre benutzerdefinierte Schriftart geladen wird
• Aktualisieren Sie den Seitenstil, um die benutzerdefinierte Schriftart zu verwenden.

// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");

// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);

// Load the font
font.load();

// Wait until the fonts are all loaded
document.fonts.ready.then(() => {
  // Update the CSS to use the fonts
});

Möglich ist dies auch mit der FontFaceObserver-Bibliothek, die für manche einfacher zu bedienen ist.

Dies ermöglicht eine Reihe von zusätzlichen Überlegungen beim Laden der Schriftarten. Beispielsweise können alle Schriftarten gleichzeitig geladen werden, sodass beim Laden jeder Schriftart mehrere Layouts vermieden werden. Es ist auch möglich, dass Websites keine Schriftarten für Nutzer mit langsameren Verbindungen oder für Nutzer mit der Option Daten speichern laden.

Bestätigen

Führen Sie Lighthouse aus, um zu prüfen, ob die Website font-display: swap zum Anzeigen von Text verwendet:

1. Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Wahltaste + J auf einem Mac), um die Entwicklertools zu öffnen.
2. Klicken Sie auf den Tab Lighthouse.
3. Achten Sie darauf, dass in der Liste Kategorien das Kästchen Leistung angeklickt ist.
4. Klicken Sie auf die Schaltfläche Bericht erstellen.

Bestätigen Sie, dass die Prüfung Sicherstellen, dass der Text während des Webfont-Ladevorgangs sichtbar bleibt bestanden wurde.