Wenn Sie Webfonts (z. B. Google Fonts) einbinden, besteht das Hauptproblem darin, dass der Browser die Seite erst rendern kann, wenn die Schriftdatei geladen ist. Dies führt oft zu "Layout Shifts" oder einem "Flash of Invisible Text" (FOIT).

Veraltete Methoden vermeiden:
Früher empfahl man den "Web Font Loader" (JavaScript) oder das Verschieben der Schrift-Einbindung an das Ende des Dokuments. Beides ist heute nicht mehr empfohlen, da es zu einem unschönen Nachspringen der Schriftart führt.

Moderne Best-Practices:
Anstatt Skripte zu laden, nutzen Sie das CSS-Attribut font-display. Dies steuert, wie die Schrift geladen wird, ohne das Rendering zu blockieren.

  1. Die Empfehlung: font-display: swap
    Fügen Sie beim Einbinden Ihrer Schriftart (in Ihrem CSS) das Attribut font-display: swap hinzu. Dies weist den Browser an, sofort eine Systemschriftart anzuzeigen, bis der Webfont geladen ist.
    
@font-face {
  font-family: 'Exo 2';
  src: url('fonts/exo2.woff2') format('woff2');
  font-display: swap; 
}
  2. Performance-Boost durch preconnect
    Um dem Browser mitzuteilen, dass er frühzeitig eine Verbindung zu den Google-Servern aufbauen soll, setzen Sie im <head> Ihrer HTML-Seite folgende Anweisung:
    
<ink rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  3. Warum nicht mehr ans Ende des Bodys?
    Das Laden von Schriften am Ende des </body>-Tags ist riskant, da der Browser den Inhalt der Seite dann erst sieht, wenn er das Ende erreicht hat. Dies führt zu einem extrem verzögerten Textaufbau. Moderne Browser sind darauf optimiert, Schriften zu laden, sobald sie im CSS referenziert werden – unterstützen Sie dies durch font-display: swap statt durch Skripte oder Umplatzierungen.

Tipps:

  • Preconnect-Tipp: Dies ist der aktuell effektivste Weg, um die Latenz beim Abruf externer Google Fonts zu minimieren, ohne JavaScript zu verwenden.
  • Der früher verwendete "Web Font Loader" wird nicht mehr aktiv weiterentwickelt und ist für moderne Webseiten unnötiger Overhead. Daher unbedingt entfernen.
  • font-display: swap ist aktuell die Standardlösung für Performance-Problemen bei Schriften (verhindert unsichtbaren Text während des Ladens).