Best Practices für Schriftarten

Webschriftarten für Core Web Vitals optimieren

Katie Hempenius
Katie Hempenius
X
Barry Pollard

In diesem Artikel werden Best Practices für die Leistung von Schriftarten erläutert. Webschriftarten können die Leistung auf unterschiedliche Art und Weise beeinflussen:

Dieser Artikel ist in drei Abschnitte unterteilt: Laden von Schriftarten, Schriftartenauslieferung und Schriftart-Rendering. In jedem Abschnitt wird erläutert, wie dieser bestimmte Aspekt des Lebenszyklus der Schriftarten funktioniert, und entsprechende Best Practices enthalten.

Schriftart wird geladen

Schriftarten sind in der Regel wichtige Ressourcen, da Nutzer ohne sie möglicherweise Seiteninhalte nicht sehen können. Daher konzentrieren sich die Best Practices für das Laden von Schriftarten im Allgemeinen darauf, dass Schriftarten so früh wie möglich geladen werden. Besondere Sorgfalt sollte auf Schriftarten angewendet werden, die von Websites von Drittanbietern geladen werden, da für das Herunterladen dieser Schriftartdateien separate Verbindungseinrichtungen erforderlich sind.

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

Screenshot des Tabs „Timing“ in den Entwicklertools

Informationen zu @font-face

Bevor Sie sich mit den Best Practices für das Laden von Schriftarten befassen, sollten Sie wissen, wie @font-face funktioniert und wie sich das auf das Laden von Schriftarten auswirkt.

Die Deklaration @font-face ist ein wesentlicher Bestandteil beim Arbeiten mit beliebigen Webschriftarten. Es gibt mindestens den Namen an, der zur Bezugnahme auf die Schriftart verwendet wird, und gibt den Speicherort der entsprechenden Schriftartdatei an.

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

Ein weitverbreitetes Missverständnis ist, dass eine Schriftart angefordert wird, wenn eine @font-face-Deklaration gefunden wird. Dies ist jedoch nicht richtig. Die Deklaration „@font-face“ allein löst keinen Download der Schriftart aus. Vielmehr wird eine Schriftart nur heruntergeladen, wenn auf der Seite durch einen Stil darauf verwiesen wird. Beispiel:

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

h1 {
  font-family: "Open Sans"
}

Mit anderen Worten, im obigen Beispiel wird Open Sans nur heruntergeladen, wenn die Seite ein <h1>-Element enthält.

Bei der Schriftartoptimierung ist es daher wichtig, Stylesheets genauso viel zu berücksichtigen wie die Schriftartdateien selbst. Das Ändern des Inhalts oder der Bereitstellung von Stylesheets kann erhebliche Auswirkungen darauf haben, wann Schriftarten eingesetzt werden. Ebenso kann das Entfernen von nicht verwendetem CSS-Code und das Aufteilen von Stylesheets die Anzahl der auf einer Seite geladenen Schriftarten verringern.

Inline-Schriftdeklarationen

Die meisten Websites würden sehr davon profitieren, Schriftartdeklarationen und andere wichtige Stile in die <head> des Hauptdokuments zu integrieren, anstatt sie in ein externes Stylesheet aufzunehmen. Auf diese Weise kann der Browser die Schriftdeklarationen schneller erkennen, da er nicht auf den Download des externen Stylesheets warten muss.

<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 Einfügen von kritischem CSS-Code kann eine fortgeschrittenere Methode sein, die nicht von allen Websites umgesetzt werden kann. Die Leistungsvorteile sind klar, aber es sind zusätzliche Prozesse und Build-Tools erforderlich, um sicherzustellen, dass das notwendige CSS – und idealerweise nur die kritische CSS – richtig eingebunden wird und dass zusätzliche CSS ohne Rendering-Blockierung bereitgestellt werden.

Vorabverbindung mit kritischen Drittanbieterursprüngen herstellen

Wenn auf Ihrer Website Schriftarten von der Website eines Drittanbieters geladen werden, empfehlen wir dringend, den Ressourcenhinweis preconnect zu verwenden, um frühzeitig eine Verbindung zur Quelle des Drittanbieters herzustellen. Ressourcenhinweise sollten im <head> des Dokuments platziert werden. Mit dem Ressourcenhinweis unten wird eine Verbindung zum Laden des Schriftart-Stylesheets eingerichtet.

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

Um die Verbindung, die zum Herunterladen der Schriftartdatei verwendet wird, vorab zu verbinden, fügen Sie einen separaten preconnect-Ressourcenhinweis mit dem Attribut crossorigin hinzu. 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>

Beachten Sie bei Verwendung des preconnect-Ressourcenhinweises, dass ein Schriftartanbieter Stylesheets und Schriftarten aus unterschiedlichen Quellen bereitstellen kann. So würde beispielsweise der Ressourcenhinweis preconnect für Google Fonts verwendet werden.

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

Vorsicht beim Laden von Schriftarten mit preload

Mit preload werden Schriftarten bereits zu Beginn des Seitenladevorgangs deutlich sichtbar gemacht. Allerdings werden dadurch Browserressourcen durch das Laden anderer Ressourcen entlastet.

Eventuell ist es effektiver, Schriftdeklarationen inline anzugeben und Stylesheets anzupassen. Diese Anpassungen kommen der Ursache für spät entdeckte Schriftarten näher als eine Behelfslösung.

Auch die Verwendung von preload als Strategie zum Laden von Schriftarten sollte mit Bedacht eingesetzt werden, da dadurch einige der im Browser integrierten Verhandlungsstrategien für Inhalte umgangen werden. preload ignoriert beispielsweise unicode-range-Deklarationen und sollte nur zum Laden eines einzelnen Schriftartformats verwendet werden.

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

Auslieferung von Schriftarten

Eine schnellere Bereitstellung von Schriftarten führt zu einem schnelleren Text-Rendering. Wenn eine Schriftart früh genug bereitgestellt wird, kann dies außerdem dazu beitragen, Layoutverschiebungen zu vermeiden, die durch das Austauschen von Schriftarten entstehen.

Selbst gehostete Schriftarten verwenden

Auf dem Papier sollte die Verwendung einer selbst gehosteten Schriftart eine bessere Leistung liefern, da keine Verbindung von Drittanbietern eingerichtet werden muss. In der Praxis sind die Leistungsunterschiede zwischen diesen beiden Optionen jedoch weniger deutlich. So hat beispielsweise Web Almanac festgestellt, dass Websites, die Schriftarten von Drittanbietern verwenden, schneller gerendert werden als Schriftarten, auf denen eigene Schriftarten verwendet wurden.

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 wesentlich unwahrscheinlicher, dass selbst gehostete Schriftarten eine bessere Leistung liefern. Weitere Informationen finden Sie unter Content Delivery Networks.

Wenn Sie eine selbst gehostete Schriftart verwenden, sollten Sie auch einige der Optimierungen für Schriftartdateien anwenden, die Drittanbieter für Schriftarten normalerweise automatisch bereitstellen, z. B. die Untereinstellung der Schriftart und die WOFF2-Komprimierung. Der erforderliche Aufwand für diese Optimierungen hängt auch von den Sprachen ab, die Ihre Website unterstützt. Insbesondere die Optimierung von Schriftarten für CJK-Sprachen kann eine besondere Herausforderung sein.

WOFF2 verwenden

Von den modernen Schriftarten ist WOFF2 die neueste, die am weitesten in Browsern unterstützt und die beste Komprimierung bietet. Da bei WOFF2 Brotli verwendet wird, komprimiert WOFF2 30% besser als WOFF, was dazu führt, dass weniger Daten heruntergeladen werden müssen und die Leistung steigt.

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

Wir glauben, dass es auch an der Zeit ist, zu behaupten: Verwende nur WOFF2 und vergiss alles andere.

Dadurch werden CSS und der Workflow erheblich vereinfacht und versehentliche doppelte oder falsche Schriftartdownloads werden vermieden. WOFF2 wird jetzt überall unterstützt. Sofern Sie keine sehr alten Browser unterstützen müssen, verwenden Sie einfach WOFF2. Ist dies nicht möglich, sollten Sie erwägen, überhaupt keine Webschriftarten für diese älteren Browser bereitzustellen. Dies stellt kein Problem dar, wenn Sie eine solide Fallback-Strategie haben. Besucher älterer Browser sehen lediglich Ihre Fallback-Schriftarten.

<ph type="x-smartling-placeholder"></ph> Bram Stein, aus dem Web Almanac 2022

Schriftarten für Teilmengen

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

Der unicode-range-Deskriptor in der @font-face-Deklaration gibt dem Browser an, 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 mit dem Unicode-Bereich übereinstimmen. unicode-range wird häufig verwendet, um je nach der für den Seiteninhalt verwendeten Sprache verschiedene Schriftartdateien bereitzustellen.

unicode-range wird häufig in Verbindung mit der Untereinstellung verwendet. Eine Untergruppe der Schriftart umfasst einen kleineren Teil der Bildzeichen, die in der ursprünglichen Schriftartdatei enthalten waren. So kann eine Website beispielsweise, anstatt alle Zeichen an alle Nutzer zu liefern, separate Teilmengenschriftarten für lateinische und kyrillische Zeichen generieren. Die Anzahl der Glyphen pro Schriftart variiert stark: Lateinische Schriftarten haben in der Regel eine Größenordnung von 100 bis 1.000 Glyphen pro Schriftart. CJK-Schriftarten können mehr als 10.000 Zeichen enthalten. Wenn Sie nicht verwendete Glyphen entfernen, kann die Dateigröße einer Schriftart erheblich reduziert werden.

Einige Schriftartenanbieter stellen automatisch verschiedene Versionen von Schriftarten mit unterschiedlichen Teilmengen bereit. Google Fonts tut dies zum Beispiel 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 zum Selbsthosting wechseln, ist dies eine Optimierung, die leicht übersehen wird und lokal zu größeren Schriftartdateien führt.

Wenn Ihr Schriftartanbieter dies zulässt, ist es auch möglich, Schriftarten manuell zu unterteilen, entweder über eine API (Google Fonts unterstützt dies durch Angabe eines text-Parameters) oder durch manuelles Bearbeiten der Schriftartdateien und anschließendes eigenständiges Hosting. Tools zum Generieren von Schriftartunterteilen sind unter anderem Subfont und Glyphanger. Sie sollten jedoch die Lizenzen für die Schriftarten prüfen, die Sie für die Untereinstellung zulassen und für das Selbsthosting verwenden.

Weniger Webschriftarten verwenden

Die schnellste Schriftart, die bereitgestellt werden kann, ist eine Schriftart, die von vornherein nicht angefordert wird. Systemschriftarten und variable Schriftarten sind zwei Möglichkeiten, die Anzahl der auf Ihrer Website verwendeten Webschriftarten potenziell zu reduzieren.

Eine Systemschriftart ist die Standardschriftart, die auf der Benutzeroberfläche eines Nutzergeräts verwendet wird. Die 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 für den Textkörper.

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 besteht darin, dass eine einzelne variable Schriftart als Ersatz für mehrere Schriftartdateien verwendet werden kann. Für variable Schriftarten wird ein Standard festgelegt, Schriftstil und Angabe von "Achsen" zur Bearbeitung der Schriftart an. Eine variable Schriftart mit einer Weight-Achse könnte beispielsweise verwendet werden, um Buchstaben zu implementieren, für die bisher separate Schriftarten für Light, Normal, Fett und Extrafett erforderlich waren.

Nicht alle profitieren vom Wechsel zu variablen Schriftarten. Variable Schriftarten umfassen viele verschiedene Stile. Die Dateien sind daher in der Regel größer als einzelne nicht variable Schriftarten, die nur einen Stil enthalten. Die größte Verbesserung gegenüber variablen Schriftarten erzielen Websites, die eine Vielzahl von Schriftstilen und -stärken verwenden (und müssen diese verwenden).

Schriftart-Rendering

Wenn eine Webschriftart noch nicht geladen ist, steht der Browser vor einem Dilemma: Sollte er mit dem Rendern von Text warten, bis die Webschriftart verfügbar ist? Oder soll der Text in einer Fallback-Schriftart gerendert werden, bis die Webschriftart erscheint?

Dieses Szenario wird in den verschiedenen Browsern unterschiedlich verarbeitet. Standardmäßig blockieren Chromium- und Firefox-Browser die Textdarstellung für bis zu 3 Sekunden, wenn die entsprechende Webschriftart nicht geladen wurde. Safari blockiert das Textrendering auf unbestimmte Zeit.

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

Geeignete font-display-Strategie auswählen

font-display informiert den Browser darüber, wie er mit dem Textrendering fortfahren soll, wenn die zugehörige Webschriftart nicht geladen wurde. Sie wird pro Schriftart definiert.

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

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

Wert Sperrzeitraum Austauschzeitraum
Automatisch Je nach Browser Je nach Browser
Blockieren 2–3 Sekunden Unbegrenzt
Swap-Speicher 0ms Unbegrenzt
Fallback 100 ms 3 Sekunden
Optional 100 ms Keine
  • Blockierzeitraum: Der Sperrzeitraum beginnt, wenn der Browser eine Webschriftart anfordert. Wenn die Webschriftart während des Sperrzeitraums nicht verfügbar ist, wird sie als unsichtbare Fallback-Schriftart gerendert. Der Text ist dann für Nutzer nicht sichtbar. Steht die Schriftart am Ende des Blockzeitraums nicht zur Verfügung, wird sie in der Fallback-Schriftart gerendert.
  • Swap-Zeitraum: Der Tauschzeitraum liegt nach dem Sperrzeitraum. Wenn die Webschriftart während des Austauschvorgangs verfügbar ist, wird sie „gewechselt“. .

font-display-Strategien spiegeln unterschiedliche Perspektiven in Bezug auf den Kompromiss zwischen Leistung und Ästhetik wider. Daher ist es schwierig, einen empfohlenen Ansatz zu wählen, da dieser von den individuellen Vorlieben abhängt, davon abhängt, wie wichtig die Webschriftart für die Seite und die Marke ist und wie irritiert eine spät ankommende Schriftart beim Einsatz sein kann.

Für die meisten Websites sind die folgenden drei Strategien am besten geeignet:

  • Wenn Leistung oberste Priorität hat:Verwenden Sie font-display: optional. Dies ist die „leistungsstärkste“ Ansatz: Das Rendern des Texts wird maximal 100 ms verzögert und es wird sichergestellt, dass es keine Layoutverschiebungen aufgrund des Schriftartwechsels gibt. Der Nachteil ist jedoch, dass die Webschriftart nicht verwendet wird, wenn sie zu spät eintrifft.

  • Wenn das schnelle Anzeigen von Text oberste Priorität hat, Sie aber dennoch sicherstellen möchten, dass die Web-Schriftart verwendet wird:Verwenden Sie font-display: swap, aber achten Sie darauf, die Schriftart so früh wie möglich bereitzustellen, damit keine Layoutverschiebung verursacht wird. Der Nachteil dieser Option ist die irritierende Verschiebung, wenn die Schriftart verspätet erscheint.

  • Wenn die Darstellung von Text in einer Webschriftart oberste Priorität hat:Verwenden Sie font-display: block. Stellen Sie jedoch sicher, dass die Schriftart so früh wie möglich bereitgestellt wird, um die Textverzögerung zu minimieren. Der Nachteil ist, dass die erste Textanzeige verzögert ist. Beachten Sie, dass es trotz dieser Verkleinerung dennoch zu einer Layoutverschiebung führen kann, da der Text eigentlich unsichtbar gezeichnet wird und der Fallback-Schriftbereich daher verwendet wird, um den Bereich zu reservieren. Sobald die Webschriftart geladen ist, benötigt dies möglicherweise mehr Platz und daher eine Verschiebung. Dies kann jedoch eine weniger auffällige Verschiebung als bei font-display: swap sein, da der Text selbst keine Verschiebung vornehmen wird.

Beachte außerdem, dass diese beiden Ansätze kombiniert werden können. Verwende beispielsweise font-display: swap für Branding und andere visuell auffällige Seitenelemente. Verwende font-display: optional für Schriftarten, die im Textkörper verwendet werden.

Reduzieren Sie die Abweichung zwischen Ihrer Fallback- und Webfont.

Sie können die neuen size-adjust-Attribute verwenden, um die CLS-Auswirkungen zu reduzieren. Weitere Informationen finden Sie im Artikel zum Preisvergleichsportal size-adjust. Dies stellt eine neue Ergänzung unseres Toolset dar, ist also fortgeschrittener und derzeit etwas manuell. Aber auf jeden Fall eine Möglichkeit, mit ihr zu experimentieren und die Tools in Zukunft zu verbessern!

Fazit

Web-Schriftarten stellen immer noch einen Leistungsengpass dar, aber wir haben eine ständig wachsende Palette von Optionen, mit denen wir sie optimieren können, um diesen Engpass so weit wie möglich zu verringern.