Sie laden Schriftarten falsch (und das schadet der Performance)

• Webfonts sind ein visuelles Element von Websites, prägen Marke und Nutzererlebnis und wirken sich direkt auf Performance und Barrierefreiheit aus
• Falsche Methoden zum Laden von Schriftarten verursachen Probleme wie FOUT (Flash of Unstyled Text) oder FOIT (Flash of Invisible Text), was sich negativ auf die Core Web Vitals auswirkt
• Das Format WOFF2 ist ein modernes und effizientes Font-Format, wird von den meisten aktuellen Browsern unterstützt und verbessert die Performance, indem unnötige Legacy-Formate entfernt werden
• Font-Subsetting und preload-Strategien sind essenziell, um unnötige Datenübertragung zu reduzieren und die Ladegeschwindigkeit von Seiten zu erhöhen
• Mit System-Font-Stacks und CSS-Deskriptoren lässt sich Layout-Verschiebung (CLS) beim Laden von Schriftarten minimieren und ein stabiles Nutzererlebnis bereitstellen

---

Eine kurze Geschichte der Webfonts

Webfonts sind ein Kernelement von Webdesign und Nutzererlebnis, und trotz ihrer Bedeutung werden sie von vielen noch immer falsch eingesetzt. Im Folgenden ein Überblick über ihre Entwicklung.

• Die Ära der „websicheren“ Fonts

  • Im frühen Web konnten nur websichere Fonts wie Arial oder Times New Roman verwendet werden; Custom Fonts wurden durch Bilder ersetzt
  • Da Browser Schriftarten unterschiedlich renderten, war ein konsistentes Design schwer umzusetzen

• Hacks vor @font-face: sIFR und Cufón

  • sIFR: Renderte Text dynamisch per Flash, war aber schwergewichtig und schwach bei der Barrierefreiheit
  • Cufón: Konvertierte Fonts per JavaScript in Vektorgrafiken und bettete sie ein, war jedoch langsam und behielt die Probleme bei der Barrierefreiheit bei

• Das Aufkommen von @font-face

  • @font-face ermöglichte das Einbinden von Custom Fonts per CSS, war aber komplex, da Browser unterschiedliche Formate verlangten (EOT, SVG-Fonts, TTF/OTF)
  • Probleme mit Font-Lizenzen und weitverbreitete illegale Kopien waren an der Tagesordnung

• Kommerzielle Dienste: Typekit und andere

  • Typekit (heute Adobe Fonts) war ein abonnementsbasierter Dienst, der Lizenz- und Kompatibilitätsprobleme löste und Fonts über ein JavaScript-Snippet bereitstellte
  • Dieses Muster der Abhängigkeit von Drittanbieter-Skripten setzt sich bis heute fort

• Kompatibilitäts-Hacks und Workarounds

  • Es war nötig, mehrere Formate zu hosten oder JavaScript-Fixes einzusetzen, um FOUT und FOIT zu beheben
  • Es gab Versuche, fehlende Glyphen durch Icon-Fonts auszugleichen

• Google Fonts und der Boom der „kostenlosen Fonts“

  • Google Fonts bot mit frei verfügbaren Open-Source-lizenzierten Fonts bequemes Font-Loading, brachte aber neue Probleme mit sich, etwa mögliche DSGVO-Verstöße und langsame Ladezeiten
  • Im Gegensatz zu kommerziellen Fonts, deren Lizenzbedingungen Optimierungen erschweren konnten, war Google Fonts frei nutzbar

Wie Fonts funktionieren (Grundlagen)

Fonts sind nicht bloß eine einfache CSS-Einstellung, sondern ein komplexer Bestandteil, der tief in die Rendering-Pipeline des Browsers eingreift.

• Formate: von TTF bis WOFF2

  • TTF/OTF: schwere, auf Desktop ausgerichtete Formate
  • WOFF2: ein modernes und effizientes Webfont-Format mit Brotli-Kompression, passend für die meisten Projekte

• Rendering-Pipeline

  • Das Laden von Fonts durchläuft die Phasen Registrierung, Style-Auflösung, Font-Matching, Glyphenabdeckung, Anfrage, Display-Phase sowie Decoding und Shaping
  • Die Einstellung font-display (swap, block, fallback, optional) bestimmt, wie Text angezeigt wird

• Metriken

  • Metriken wie Ascent, descent und line gap definieren Höhe und Abstände einer Schriftart
  • Beim Austausch von Fonts kann eine Nichtübereinstimmung der Metriken zu Layout-Verschiebung (CLS) führen

• Synthetische Stile

  • Wenn der Browser das angeforderte Font-Weight oder den gewünschten Stil nicht findet, erzeugt er künstlich Fettschrift oder Kursivschrift, was die Qualität mindert
  • Mit font-synthesis: none; lässt sich die Erzeugung künstlicher Stile verhindern

• Glyphenabdeckung

  • Fonts enthalten nicht alle Zeichen; fehlende Glyphen werden mit einer Fallback-Schriftart gerendert, was zu Inkonsistenzen führt
  • Mit unicode-range lässt sich festlegen, dass nur benötigte Glyphen geladen werden

Grundlagen zu Performance und Strategien

Fonts beeinflussen den kritischen Rendering-Pfad und können bei falscher Handhabung die Performance verschlechtern.

• Dateigröße

  • Eine einzelne Font-Familie kann bis zu 800 KB groß sein; unnötig enthaltene Glyphen verschwenden Daten
  • Durch Font-Subsetting werden nur die benötigten Glyphen übertragen und die Größe optimiert

• Layout-Verschiebung

  • Unterschiede in den Metriken zwischen Fallback- und Custom Fonts verursachen CLS
  • Mit CSS-Deskriptoren wie size-adjust und ascent-override lässt sich das Layout stabilisieren

• Moderne CSS-Deskriptoren

  • font-display: swap; zeigt sofort eine Fallback-Schriftart an und sorgt für stabiles Rendering
  • Über unicode-range werden nur die Glyphen geladen, die für ein bestimmtes Schriftsystem nötig sind

Variable Fonts: Versprechen und Realität

Variable Fonts können die Effizienz steigern, indem sie mehrere Stile und Weights in einer einzigen Datei unterstützen.

• Das Versprechen

  • Mehrere statische Dateien werden in einer einzelnen Datei zusammengeführt
  • Responsive Typografie, die sich dynamisch an die Größe des Viewports anpassen kann

• Die Realität

  • Wenn nur wenige Weights benötigt werden, können Variable Fonts schwerer sein
  • Der Browser-Support ist bei einigen Achsen eingeschränkt, zudem können Lizenzprobleme auftreten

• Performance-Strategie

  • Nur benötigte Achsen auswählen und die Dateigröße per skriptspezifischem Subsetting optimieren
  • Prüfen, ob es gegenüber statischen Fonts tatsächlich echte Vorteile gibt

• Beispiel für die Nutzung von Variable-Font-Achsen in CSS

  @font-face {  
    font-family: "Acme Variable";  
    src: url("/fonts/acme-variable.woff2") format("woff2-variations");  
    font-weight: 100 900;  
    font-display: swap;  
  }  
  h1 {  
    font-family: "Acme Variable", system-ui, sans-serif;  
    font-weight: 700;  
  }  
  

System-Stacks und CDN

Wer statt Custom Fonts einen System-Font-Stack verwendet, erhält sofortiges Laden und ein vertrautes Erlebnis.

• System-Font-Stack

  • Ein Stack mit Fonts wie -apple-system und Segoe UI sorgt plattformübergreifend für Konsistenz
  • Beim Rendern von Emojis liefern System-Fonts bessere Performance

• CDN und Hosting bei Drittanbietern

  • Google Fonts kann durch Datenweitergabe zu möglichen DSGVO-Verstößen führen
  • Self-Hosting reduziert Verzögerungen durch DNS-Lookups und ermöglicht Kontrolle über das Caching

Fallback-Schriften und Matching

Fallback-Schriften bestimmen das Nutzererlebnis, bevor eine Custom Font geladen ist, und müssen stabil gestaltet werden.

• Gestaltung von Fallback-Schriften

  • Durch ähnliche x-height und Zeichenbreite wie bei der Custom Font wird CLS minimiert
  • Mit font-size-adjust lässt sich die Größe der Fallback-Schrift anpassen

• Matching von Custom- und Fallback-Schriften

  • Fonts mit ähnlichen Proportionen wählen und durch Metrik-Anpassung Layout-Stabilität sicherstellen
  • Unterschiede im plattformspezifischen Rendering berücksichtigen und Stabilität sowie Lesbarkeit priorisieren

Preloading und Lade-Strategien

Die Strategie zur Auslieferung von Fonts hat großen Einfluss auf das Nutzererlebnis.

• Ladeergebnisse

  • FOIT führt in langsamen Netzwerken dazu, dass Text unsichtbar bleibt
  • font-display: swap; ist ein sicherer Standardwert, der sofort eine Fallback-Schrift anzeigt

• Preloading

  • Mit <link rel="preload" as="font"> wird das Laden von Fonts sofort gestartet
  • CORS-Header und eine exakt passende URL sind zwingend erforderlich

• Early Hints (HTTP 103)

  • Der Server kann noch vor der HTML-Antwort anweisen, Fonts abzurufen, um Ladezeiten zu verkürzen
  • Nur kritische Fonts sollten per Hint angegeben werden, um Bandbreite nicht zu verschwenden

• Font Loading API

  • Die Font Loading API erlaubt auf dynamischen Websites eine feinere Steuerung des Font-Loadings

Dateiformate: WOFF2, WOFF, TTF und die Last von Legacy-Formaten

WOFF2 ist im modernen Web das effizienteste Format; in den meisten Fällen reicht ein einziges Format aus.

• Nur WOFF2 verwenden und unnötige Formate entfernen
• base64-Einbettung sollte vermieden werden, da sie das Caching behindert

Icon-Fonts: Font Awesome und ein großer Fehler

Icon-Fonts sind wegen Problemen bei Barrierefreiheit und Performance für das moderne Web ungeeignet.

• SVG-Icons sind semantisch, flexibel und per CSS stylbar
• Bei bestehender Nutzung von Icon-Fonts sind Subsetting und ein Migrationsplan hin zu SVG nötig

Jenseits von Latein: nichtlateinische Schriftsysteme, RTL-Sprachen und Emojis

Nichtlateinische Schriftsysteme und RTL-Sprachen erfordern komplexes Shaping und spezielle Metriken.

• Beim Subsetting müssen die Eigenschaften einzelner Schriftsysteme berücksichtigt werden, um Rendering-Fehler zu vermeiden
• Emojis sollten mit System-Fonts dargestellt werden, um Konsistenz und Performance zu verbessern

Die Zukunft der Webfonts: sich entwickelnde Standards und moderne Risiken

Neue CSS-Eigenschaften sowie Variable Fonts und Color Fonts treiben die Webtypografie voran.

• Mit Font Loading API und Early Hints lassen sich Verzögerungsprobleme in SPAs verringern
• Fonts sollten als Infrastruktur betrachtet werden; Performance und Barrierefreiheit müssen Priorität haben

Tools und Audits

Die Font-Performance lässt sich mit Tools wie DevTools, Lighthouse und Glyphhanger messen.

• Mit Font-Subsetting-Tools lassen sich unnötige Glyphen entfernen
• Mit Font Style Matcher können die Metriken von Fallback-Schriften angepasst werden

Ein Manifest für den richtigen Umgang mit Fonts

Fonts sind keine bloße Dekoration, sondern ein Kernelement von Nutzererlebnis und Performance.

• Systeme zuerst: mit einem robusten System-Font-Stack beginnen
• Intelligentes Subsetting: nur benötigte Glyphen übertragen
• Nur WOFF2: Legacy-Formate entfernen
• Globale Schriftsysteme respektieren: verschiedene Sprachen und Emojis unterstützen
• Tests sind wichtig: in verschiedenen Netzwerken und auf unterschiedlichen Geräten testen

Fonts sollten sowohl als Inhalt als auch als Marke verstanden werden, und ihr Einsatz sollte streng unter Performance- und Barrierefreiheitsaspekten gesteuert werden.

[nemorize]

Cufón – den Namen habe ich wirklich seit Ewigkeiten nicht mehr gehört, haha.