Best Practices für Schriftarten

Webfonts für Core Web Vitals optimieren

Katie Hempenius
Katie Hempenius
X
Barry Pollard

In diesem Dokument werden Best Practices für die Leistung von Schriftarten behandelt. Webfonts können sich auf verschiedene Weise auf die Leistung auswirken:

Dieses Dokument ist in drei Abschnitte unterteilt: Schriftarten laden, Schriftarten bereitstellen und Schriftarten rendern. In jedem Abschnitt wird erläutert, wie der jeweilige Aspekt des Schriftartenlebenszyklus funktioniert, und es werden entsprechende Best Practices vorgestellt.

Schriftarten laden

Schriftarten sind wichtige Ressourcen. Ohne sie können Nutzer möglicherweise keine Seiteninhalte sehen. Daher konzentrieren sich Best Practices für das Laden von Schriftarten in der Regel darauf, dass Schriftarten so früh wie möglich geladen werden. Besondere Aufmerksamkeit sollte Schriftarten gewidmet werden, die von Websites von Drittanbietern geladen werden, da für das Herunterladen dieser Schriftartdateien separate Verbindungen eingerichtet werden müssen.

Wenn Sie nicht sicher sind, ob die Schriftarten Ihrer Seite rechtzeitig angefordert werden, finden Sie weitere Informationen auf dem Tab Timing im Bereich Netzwerk der Chrome-Entwicklertools.

Der Tab „Timing“ in den Entwicklertools.

@font-face verstehen

Bevor Sie sich mit den Best Practices für das Laden von Schriftarten befassen, ist es wichtig zu verstehen, wie @font-face funktioniert und wie sich dies auf das Laden von Schriftarten auswirkt.

Die @font-face Deklaration ist ein wesentlicher Bestandteil der Arbeit mit Webfonts. Mindestens wird der Name deklariert, der zum Verweisen auf die Schriftart verwendet wird, und der Speicherort der entsprechenden Schriftartdatei wird angegeben.

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

Ein häufiges Missverständnis ist, dass eine Schriftart angefordert wird, wenn eine @font-face-Deklaration gefunden wird. Das ist falsch. Die @font-face-Deklaration allein löst keinen Schriftart-Download aus. Eine Schriftart wird nur heruntergeladen, wenn sie durch ein Styling referenziert wird, das auf der Seite verwendet wird. Beispiel:

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

h1 {
  font-family: "Open Sans"
}

In diesem Beispiel wird Open Sans nur heruntergeladen, wenn die Seite ein <h1> Element enthält.

Wenn Sie also über die Optimierung von Schriftarten nachdenken, sollten Sie Stylesheets genauso berücksichtigen wie die Schriftartdateien selbst. Änderungen am Inhalt oder an der Bereitstellung von Stylesheets können erhebliche Auswirkungen darauf haben, wann Schriftarten eintreffen. Wenn Sie nicht verwendetes CSS entfernen und Stylesheets aufteilen, kann die Anzahl der Schriftarten reduziert werden, die von einer Seite geladen werden.

Inline-Schriftartdeklarationen

Die meisten Websites würden stark davon profitieren, Schriftartdeklarationen und andere kritische Stile im <head> des Hauptdokuments inline zu verwenden, anstatt sie in ein externes Stylesheet einzufügen. So kann der Browser die Schriftartdeklarationen früher erkennen, da er nicht warten muss, bis das externe Stylesheet heruntergeladen wurde.

<head>
  <style>
    @font-face {
        font-family: "Open Sans";
        src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    }

    body {
        font-family: "Open Sans";
    }

    ...etc.

  </style>
</head>

Das Inline-Verwenden von kritischem CSS kann eine komplexere Technik sein, die nicht alle Websites umsetzen können. Die Leistungsvorteile sind klar, aber es sind zusätzliche Prozesse und Build-Tools erforderlich, um sicherzustellen, dass das erforderliche CSS und idealerweise nur das kritische CSS korrekt inline verwendet wird und dass zusätzliches CSS auf eine Weise bereitgestellt wird, die das Rendering nicht blockiert.

Vorverbindung zu kritischen Drittanbieterquellen aufbauen

Wenn Ihre Website Schriftarten von einer Drittanbieterwebsite lädt, sollten Sie unbedingt den preconnect Ressourcenhinweis verwenden, um frühzeitig Verbindungen zur Drittanbieterquelle herzustellen. Ressourcenhinweise sollten im <head> des Dokuments platziert werden. Mit dem folgenden Ressourcenhinweis wird eine Verbindung zum Laden des Schriftart-Stylesheets eingerichtet.

<head>
  <link rel="preconnect" href="https://fonts.com">
</head>

Wenn Sie die Verbindung, die zum Herunterladen der Schriftartdatei verwendet wird, vorverbinden möchten, fügen Sie einen separaten preconnect-Ressourcenhinweis hinzu, der das Attribut crossorigin verwendet. Im Gegensatz zu Stylesheets müssen Schriftartdateien über eine CORS-Verbindung gesendet werden.

<head>
  <link rel="preconnect" href="https://fonts.com">
  <link rel="preconnect" href="https://fonts.com" crossorigin>
</head>

Wenn Sie den Ressourcenhinweis preconnect verwenden, beachten Sie, dass ein Schriftartanbieter Stylesheets und Schriftarten möglicherweise von separaten Quellen bereitstellt. So wird der Ressourcenhinweis preconnect beispielsweise für Google Fonts verwendet.

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>

preload zum Laden von Schriftarten mit Vorsicht verwenden

preload ist zwar sehr effektiv, um Schriftarten frühzeitig im Seitenaufbau erkennbar zu machen, aber das geht auf Kosten der Browserressourcen, die für das Laden anderer Ressourcen benötigt werden.

Das Inline-Verwenden von Schriftartdeklarationen und das Anpassen von Stylesheets kann ein effektiverer Ansatz sein. Diese Anpassungen gehen eher auf die Ursache für spät erkannte Schriftarten ein, als nur eine Problemumgehung zu bieten.

Außerdem sollte preload als Strategie zum Laden von Schriftarten mit Vorsicht verwendet werden, da dadurch einige der integrierten Strategien zur Inhaltsvereinbarung des Browsers umgangen werden. preload ignoriert beispielsweise unicode-range-Deklarationen und sollte, wenn es umsichtig verwendet wird, nur zum Laden eines einzelnen Schriftartformats verwendet werden.

Wenn Sie jedoch externe Stylesheets verwenden, kann das Vorladen der wichtigsten Schriftarten sehr effektiv sein, da der Browser sonst erst viel später erkennt, ob die Schriftart benötigt wird.

Schriftarten bereitstellen

Eine schnellere Bereitstellung von Schriftarten führt zu einer schnelleren Textwiedergabe. Wenn eine Schriftart früh genug bereitgestellt wird, können außerdem Layoutverschiebungen vermieden werden, die durch das Ersetzen von Schriftarten entstehen.

Selbst gehostete Schriftarten verwenden

Theoretisch sollte die Verwendung einer selbst gehosteten Schriftart zu einer besseren Leistung führen, da die Einrichtung einer Drittanbieterverbindung entfällt. In der Praxis sind die Leistungsunterschiede zwischen diesen beiden Optionen weniger eindeutig. Im Web Almanac wurde beispielsweise festgestellt, dass Websites, die Schriftarten von Drittanbietern verwenden, schneller gerendert werden als Websites, die eigene Schriftarten verwenden.

Wenn Sie selbst gehostete Schriftarten verwenden möchten, prüfen Sie, ob Ihre Website ein Content Delivery Network (CDN) und HTTP/2 verwendet. Ohne diese Technologien ist es viel weniger wahrscheinlich, dass selbst gehostete Schriftarten eine bessere Leistung bieten.

Wenn Sie eine selbst gehostete Schriftart verwenden, sollten Sie auch einige der Optimierungen für Schriftartdateien anwenden, die von Drittanbietern in der Regel automatisch bereitgestellt werden. Beispiele sind das Erstellen von Schriftart-Subsets und die WOFF2-Komprimierung. Der Aufwand für die Anwendung dieser Optimierungen hängt etwas von den Sprachen ab, die Ihre Website unterstützt. Insbesondere die Optimierung von Schriftarten für CJK-Sprachen kann eine Herausforderung sein.

WOFF2 verwenden

Von den modernen Schriftarten ist WOFF2 die neueste, bietet die breiteste Browserunterstützung und die beste Komprimierung. Da WOFF2 Brotli verwendet, ist die Komprimierung um 30% besser als bei WOFF. Das führt zu weniger Daten, die heruntergeladen werden müssen, und damit zu einer schnelleren Leistung.

Angesichts der Browserunterstützung empfehlen Experten jetzt, nur WOFF2 zu verwenden:

Wir sind der Meinung, dass es an der Zeit ist, zu verkünden: Verwenden Sie nur WOFF2 und vergessen Sie alles andere.

Dadurch werden Ihr CSS und Ihr Workflow erheblich vereinfacht und versehentliche doppelte oder falsche Schriftart-Downloads vermieden. WOFF2 wird jetzt überall unterstützt. Wenn Sie also nicht wirklich alte Browser unterstützen müssen, verwenden Sie einfach WOFF2. Wenn das nicht möglich ist, sollten Sie diesen älteren Browsern überhaupt keine Webfonts bereitstellen. Das ist kein Problem, wenn Sie eine robuste Fallback-Strategie haben. Besucher mit älteren Browsern sehen Ihre Fallback-Schriftarten.

Bram Stein, Web Almanac 2022

Schriftart-Subsets erstellen

Schriftartdateien enthalten in der Regel eine große Anzahl von Glyphen für alle unterstützten Zeichen. Möglicherweise benötigen Sie aber nicht alle Zeichen auf Ihrer Seite und können die Größe von Schriftartdateien reduzieren, indem Sie Schriftart-Subsets erstellen.

Der unicode-range Deskriptor in der @font-face Deklaration informiert den Browser, für welche Zeichen eine Schriftart verwendet werden kann.

@font-face {
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    unicode-range: U+0025-00FF;
}

Eine Schriftartdatei wird heruntergeladen, wenn die Seite ein oder mehrere Zeichen enthält, die dem Unicode-Bereich entsprechen. unicode-range wird häufig verwendet, um je nach Sprache des Seiteninhalts unterschiedliche Schriftartdateien bereitzustellen.

unicode-range wird oft in Verbindung mit der Technik des Erstellens von Schriftart-Subsets verwendet. Ein Schriftart-Subset enthält einen kleineren Teil der Glyphen, die in der ursprünglichen Schriftartdatei enthalten waren. Anstatt beispielsweise alle Zeichen für alle Nutzer bereitzustellen, kann eine Website separate Schriftart-Subsets für lateinische und kyrillische Zeichen erstellen.

Die Anzahl der Glyphen pro Schriftart variiert stark:

  • Lateinische Schriftarten enthalten in der Regel 100 bis 1.000 Glyphen pro Schriftart.
  • CJK-Schriftarten können über 10.000 Zeichen haben.

Durch das Entfernen nicht verwendeter Glyphen kann die Dateigröße einer Schriftart erheblich reduziert werden.

Einige Schriftartanbieter stellen möglicherweise automatisch verschiedene Versionen von Schriftartdateien mit unterschiedlichen Subsets bereit. Google Fonts macht das beispielsweise standardmäßig:

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Wenn Sie zu selbst gehosteten Schriftarten wechseln, kann diese Optimierung übersehen werden und zu größeren Schriftartdateien lokal führen.

Sie können Schriftart-Subsets manuell erstellen, wenn Ihr Schriftartanbieter dies zulässt, entweder mit einer API (Google Fonts unterstützt dies mit dem text Parameter), oder indem Sie die Schriftartdateien manuell bearbeiten und dann selbst hosten. Tools zum Erstellen von Schriftart-Subsets sind beispielsweise subfont und glyphanger.

Prüfen Sie immer die Schriftartlizenzen, um sicherzustellen, dass das Erstellen von Schriftart-Subsets und das Selbst-Hosting zulässig sind.

Weniger Webfonts verwenden

Die schnellste Schriftart ist eine, die gar nicht angefordert wird. Systemschriftarten und variable Schriftarten sind zwei Möglichkeiten, die Anzahl der auf Ihrer Website verwendeten Webfonts zu reduzieren.

Eine Systemschriftart ist die Standardschriftart, die von der Benutzeroberfläche des Geräts eines Nutzers verwendet wird. Systemschriftarten variieren in der Regel je nach Betriebssystem und Version. Da die Schriftart bereits installiert ist, muss sie nicht heruntergeladen werden. Systemschriftarten eignen sich besonders gut für Fließtext.

Wenn Sie die Systemschriftart in Ihrem CSS verwenden möchten, geben Sie system-ui als Schriftfamilie an:

font-family: system-ui

Die Idee hinter variablen Schriftarten ist, dass eine einzelne variable Schriftart als Ersatz für mehrere Schriftartdateien verwendet werden kann. Variable Schriftarten funktionieren, indem ein „Standard“-Schriftstil definiert und „Achsen“ zum Bearbeiten der Schriftart bereitgestellt werden. Mit einer variablen Schriftart mit einer Weight-Achse können beispielsweise Schriftzüge implementiert werden, für die zuvor separate Schriftarten für „Light“, „Regular“, „Bold“ und „Extra Bold“ erforderlich waren.

Nicht jeder profitiert von der Umstellung auf variable Schriftarten. Variable Schriftarten enthalten viele Stile und haben daher in der Regel größere Dateigrößen als einzelne nicht variable Schriftarten, die nur einen Stil enthalten. Websites, die die größten Verbesserungen durch die Verwendung variabler Schriftarten erzielen, sind solche, die eine Vielzahl von Schriftstilen und ‑stärken verwenden (und verwenden müssen).

Schriftarten rendern

Wenn ein Webfont noch nicht geladen wurde, steht der Browser vor einem Dilemma: Soll er mit dem Rendern von Text warten, bis der Webfont eingetroffen ist? Oder soll er den Text in einer Fallback-Schriftart rendern, bis der Webfont eintrifft?

Verschiedene Browser gehen unterschiedlich mit diesem Szenario um. Standardmäßig blockieren Chromium-basierte Browser und Firefox die Textwiedergabe für bis zu 3 Sekunden, wenn der zugehörige Webfont nicht geladen wurde. Safari blockiert die Textwiedergabe unbegrenzt.

Dieses Verhalten kann mit dem Attribut font-display konfiguriert werden. Diese Wahl kann erhebliche Auswirkungen haben: font-display kann sich auf LCP, FCP und die Layoutstabilität auswirken.

Eine geeignete font-display-Strategie auswählen

font-display informiert den Browser, wie er mit der Textwiedergabe fortfahren soll, wenn der zugehörige Webfont nicht geladen wurde. Es wird pro Schriftart definiert.

@font-face {
  font-family: Roboto, Sans-Serif
  src: url(/fonts/roboto.woff) format('woff'),
  font-display: swap;
}

Es gibt fünf mögliche Werte für font-display:

Wert Blockzeitraum Swap-Zeitraum
Automatisch Variiert je nach Browser Variiert je nach Browser
Blockieren 2–3 Sekunden Unbegrenzt
Swap-Speicher 0ms Unbegrenzt
Fallback 100ms 3 Sekunden
Optional 100ms –
  • Blockzeitraum: Der Blockzeitraum beginnt, wenn der Browser einen Web font anfordert. Wenn der Webfont während des Blockzeitraums nicht verfügbar ist, wird die Schriftart in einer unsichtbaren Fallback-Schriftart gerendert und der Text ist für den Nutzer nicht sichtbar. Wenn die Schriftart am Ende des Blockzeitraums nicht verfügbar ist, wird sie in der Fallback-Schriftart gerendert.
  • Swap-Zeitraum: Der Swap-Zeitraum folgt auf den Blockzeitraum. Wenn der Webfont während des Swap-Zeitraums verfügbar wird, wird er „eingesetzt“.

font-display -Strategien spiegeln unterschiedliche Ansichten über den Kompromiss zwischen Leistung und Ästhetik wider. Daher ist es schwierig, einen Ansatz zu empfehlen, da er von den individuellen Vorlieben, der Bedeutung des Webfonts für die Seite und die Marke sowie davon abhängt, wie störend eine spät eintreffende Schriftart sein kann, wenn sie eingesetzt wird.

Für die meisten Websites sind dies die drei am besten geeigneten Strategien, je nach Ihrer obersten Priorität:

  • Leistung: Verwenden Sie font-display: optional. Dies ist der leistungsstärkste Ansatz: Die Textwiedergabe wird nicht länger als 100 ms verzögert und es gibt keine Layoutverschiebungen im Zusammenhang mit dem Ersetzen von Schriftarten. Der Nachteil ist, dass der Webfont nicht verwendet wird, wenn er zu spät eintrifft.

  • Text schnell anzeigen und trotzdem einen Webfont verwenden: Verwenden Sie font-display: swap stellen Sie aber sicher, dass die Schriftart früh genug bereitgestellt wird, damit es nicht zu einer Layout verschiebung kommt. Der Nachteil dieser Option ist die störende Verschiebung, wenn die Schriftart zu spät eintrifft.

  • Text in einem Webfont anzeigen: Verwenden Sie font-display: block, stellen Sie aber sicher , dass die Schriftart früh genug bereitgestellt wird, damit die Verzögerung des Texts minimiert wird. Die anfängliche Textanzeige wird verzögert. Trotz dieser Verzögerung kann es zu einer Layoutverschiebung kommen, da der Text tatsächlich unsichtbar gezeichnet wird und der Platz der Fallback-Schriftart daher verwendet wird, um den Platz zu reservieren. Sobald der Webfont geladen ist, kann dies einen anderen Platz erfordern, was zu einer Verschiebung führt. Diese Verschiebung ist möglicherweise weniger störend als bei font-display: swap, da der Text selbst nicht verschoben wird.

Beachten Sie auch, dass diese beiden Ansätze kombiniert werden können. Verwenden Sie beispielsweise font-display: swap für Branding und andere visuell unverwechselbare Seitenelemente. Verwenden Sie font-display: optional für Schriftarten, die im Fließtext verwendet werden.

Symbolschriftarten

Die font-display-Strategien, die für herkömmliche Webfonts gut funktionieren, eignen sich nicht so gut für Symbolschriftarten. Die Fallback-Schriftart für eine Symbolschriftart sieht in der Regel ganz anders aus als die Symbolschriftart und ihre Zeichen können eine völlig andere Bedeutung haben. Daher verursachen Symbolschriftarten eher erhebliche Layoutverschiebungen.

Außerdem ist die Verwendung einer Fallback-Schriftart möglicherweise nicht praktikabel. Ersetzen Sie Symbolschriftarten nach Möglichkeit durch SVGs, was auch besser für die Barrierefreiheit ist. Neuere Versionen beliebter Symbolschriftarten unterstützen in der Regel SVG. Weitere Informationen zum Wechsel zu SVGs finden Sie auf der Seite zu SVG-Sprites von Font Awesome und in unserem Leitfaden zu Material Icons.

Die Verschiebung zwischen Fallback-Schriftart und Webfont reduzieren

Um die Auswirkungen auf den CLS zu reduzieren, können Sie die size-adjust Attribute verwenden.

Fazit

Webfonts sind immer noch ein Leistungsengpass, aber wir haben eine ständig wachsende Auswahl an Optionen, um sie zu optimieren und diesen Engpass so weit wie möglich zu reduzieren.