Webfonts und Performance: ein heikles Verhältnis

Webfonts sind einer der häufigsten unsichtbaren Performance-Bremser. Eine Marke wählt eine ausdrucksstarke Schrift, ein paar Schnitte werden eingebunden, und plötzlich rutscht die Startseite in den Lighthouse-Berichten nach unten. Das passiert selten aus Nachlässigkeit, sondern aus einer Kette kleiner Entscheidungen, die jeweils plausibel klingen.

Warum Webfonts ein heikles Thema sind

Schrift ist Bestandteil der Marke. Gleichzeitig ist sie eine externe Ressource, die geladen werden muss, bevor Texte in der gewünschten Form erscheinen. Genau dieser Doppelcharakter macht sie heikel: Sie wirkt wie ein Designdetail, ist aber technisch ein eigener Renderingfaktor.

Bevor die Schrift da ist, hat der Browser zwei Optionen: warten oder mit einer Ersatzschrift rendern. Beide Varianten haben Nebenwirkungen, die sich in den Core Web Vitals niederschlagen.

Typische Fehler bei der Einbindung

Die meisten Webfont-Probleme entstehen durch dieselben Muster:

• zu viele Schriftschnitte und Gewichte parallel geladen
• voller Zeichensatz, obwohl nur Latein gebraucht wird
• Webfonts ohne klare Anzeigeregel (font-display)
• Schrift nicht selbst gehostet, sondern über Drittanbieter mit zusätzlichem Roundtrip
• keine Vorsorge für die Phase, in der die Schrift noch nicht da ist

Einzeln wirken diese Punkte klein. In Summe entstehen längere Ladezeiten, sichtbare Layout-Sprünge und eine spürbare Reibung im ersten Eindruck.

Selbst hosten ist meistens die ruhigere Option

Schriften über fremde CDNs einzubinden ist bequem, hat aber Schattenseiten: zusätzliche DNS-Lookups, getrennte Caches, mögliche Privacy-Diskussionen, nicht immer die volle Kontrolle über Header und Versionen.

In einer modernen Next.js-Anwendung ist die saubere Variante, Schriften lokal mitzuliefern und über das Build-System optimiert auszuspielen. Das gibt dem Projekt Kontrolle über Format, Subset, Caching und Lade-Reihenfolge, ohne dass jemand zwingend tief in Browsertricks einsteigen muss.

Anzeigeverhalten bewusst entscheiden

font-display: swap ist nicht für jedes Projekt das Richtige, aber für die meisten. Die Seite rendert sofort mit einer Ersatzschrift und tauscht aus, sobald die Webfont da ist. Das verhindert, dass Texte unsichtbar bleiben, während Nutzer schon scrollen wollen.

Der Preis ist ein möglicher Sprung im Layout, wenn Ersatzschrift und Webfont sehr unterschiedliche Metriken haben. Genau deshalb lohnt es sich, die Ersatzschrift bewusst zu wählen oder die Schrift mit angepassten Metriken zu laden, damit die Umstellung kaum auffällt.

Subsetting statt Vollausstattung

Eine Schrift mit allen Gewichten und vollem Unicode-Bereich ist meistens überdimensioniert. Wer auf der Website fast nur Latein nutzt und nicht jede Variante einsetzt, kann die Datenmenge oft halbieren, ohne dass jemand den Unterschied sieht.

Subsetting heisst nicht, die Marke zu beschneiden. Es heisst, nur das auszuliefern, was wirklich genutzt wird. Damit wird LCP entlastet, das Bandbreitenbudget kleiner und die Seite spürbar leichter.

Core Web Vitals und Schrift

Webfonts wirken vor allem auf zwei Metriken:

• LCP wird länger, wenn die Headline auf eine Schrift wartet, die noch geladen wird.
• CLS entsteht, wenn die fertige Schrift nach dem ersten Render einrastet und Inhalte verschoben werden.

Wer diese beiden Punkte ernst nimmt, hat schon den grössten Teil der Webfont-Performance abgedeckt. Mehr zum Hintergrund gibt es in Largest Contentful Paint verbessern, ohne Entwickler zu sein.

Pragmatische Empfehlung

Eine ruhige, brauchbare Linie für die meisten Unternehmenswebsites:

• eine Markenschrift, höchstens zwei Schnitte für Headlines
• eine ruhige Lese-Schrift, ein bis zwei Schnitte für Fliesstexte
• selbst gehostet, modern komprimiert
• klar definiertes Anzeigeverhalten und passende Ersatzschrift
• reduziertes Subset auf die tatsächlich genutzten Sprachen

Diese Kombination liefert Markencharakter, ohne die Performance zu zerlegen.

Fazit

Webfonts müssen nicht der Bremsklotz einer Website sein. Wer sie wie eine technische Ressource behandelt und nicht nur wie eine Designentscheidung, kann Marken-Typografie und Core Web Vitals sauber zusammenbringen. Das ist weniger eine Frage von Tools als von wenigen, klaren Entscheidungen, die früh getroffen werden.