Wie Webfonts schnell laden

So funktioniert es

Eine Webfont wird im Stylesheet mit einer @font-face-Regel eingebunden. Der Browser lädt die Datei erst, wenn er Text in dieser Schrift zeichnen will. Bis sie da ist, blenden die meisten Browser den Text bis zu drei Sekunden lang aus. Besucher sehen dann eine Seite ohne Text.

Die Eigenschaft font-display ändert das. Mit swap erscheint der Text sofort in einer Ersatzschrift und wechselt, sobald die Webfont geladen ist.

bytereport liest die @font-face-Regeln der Stylesheets, die das HTML einbindet, und warnt, wenn eine davon kein font-display hat. In den Details stehen außerdem die Schriftdateien mit ihrer Größe.

Worauf es ankommt

• font-display: swap; in jeder Regel.
• Nur WOFF2. Alle aktuellen Browser verstehen das Format, und es ist das kleinste. Ältere Formate wie TTF oder EOT kannst du weglassen.
• Nur genutzte Schnitte. Jede Stärke und jede Kursive ist eine eigene Datei. Oft reichen zwei oder drei. Eine Teilmenge der Zeichen, etwa nur lateinische Schrift, macht die Dateien kleiner.
• Von der eigenen Domain. Schriften von einem fremden Server kosten eine zusätzliche Verbindung. Bei Google Fonts geht außerdem die IP-Adresse deiner Besucher an Google, siehe externe Inhalte.
• Die wichtigste Schrift vorladen. Mit preload beginnt der Browser früher, statt erst das Stylesheet abzuwarten.
• Möglichst ähnliche Ersatzschrift. Weicht sie in der Breite stark ab, springt der Text beim Wechsel, siehe CLS.

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

<link rel="preload" href="/fonts/inter-latin-400.woff2" as="font" type="font/woff2" crossorigin>

Das Attribut crossorigin gehört bei Schriften auch dann dazu, wenn sie von der eigenen Domain kommen.

So richtest du es ein

Die @font-face-Regeln stehen im Stylesheet des Themes; dort ergänzt du font-display oder lässt es deine Agentur tun. Bindest du Google Fonts über deren Adresse ein, sorgt der Zusatz &display=swap dafür. Für viele CMS gibt es Plugins, die Schriften auf den eigenen Server holen.