Best Practices für Schriftarten

Webfonts 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 beschrieben. Webschriftarten haben verschiedene Möglichkeiten, die Leistung zu beeinflussen:

Dieser Artikel ist in drei Abschnitte unterteilt: Schriftarten laden, Schriftarten bereitstellen und Schriftarten rendern. In jedem Abschnitt wird erläutert, wie dieser bestimmte Aspekt des Lebenszyklus von Schriftarten funktioniert, und es werden entsprechende Best Practices vorgestellt.

Schriftart wird geladen

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

Wenn Sie sich 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 dazu.

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 dies auf das Laden von Schriftarten auswirkt.

Die @font-face-Deklaration ist ein wesentlicher Bestandteil der Arbeit mit beliebigen Webschriftarten. Es gibt mindestens den Namen an, der für die Schriftart verwendet werden soll, und gibt den Speicherort der entsprechenden Schriftartdatei an.

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

Ein häufiger Irrglaube ist, dass eine Schriftart angefordert wird, wenn eine @font-face-Deklaration vorliegt. Dies ist nicht der Fall. Durch die @font-face-Deklaration wird keine Schriftart heruntergeladen. Vielmehr wird eine Schriftart nur dann heruntergeladen, wenn durch den auf der Seite verwendeten Stil auf sie verwiesen wird. Beispiel:

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

h1 {
  font-family: "Open Sans"
}

Anders ausgedrückt: Im Beispiel oben würde Open Sans nur heruntergeladen, wenn die Seite ein <h1>-Element enthält.

Bei der Schriftartoptimierung ist es daher wichtig, Stylesheets genauso zu berücksichtigen wie die Schriftartdateien selbst. Das Ändern des Inhalts oder der Bereitstellung von Stylesheets kann einen erheblichen Einfluss darauf haben, wann Schriftarten eintreffen. Ebenso kann das Entfernen von nicht verwendetem CSS-Code und das Aufteilen von Stylesheets die Anzahl der von einer Seite geladenen Schriftarten reduzieren.

Deklarationen für Inline-Schriftarten

Für die meisten Websites wäre es sehr hilfreich, Schriftdeklarationen und andere wichtige Stile im <head> des Hauptdokuments einzufügen, anstatt sie in ein externes Stylesheet aufzunehmen. So kann der Browser die Schriftartdeklarationen früher 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>

Die Inline-Einbindung wichtiger CSS-Elemente kann eine fortgeschrittene Methode sein, die nicht allen Websites ermöglicht wird. Die Leistungsvorteile sind offensichtlich, es sind jedoch zusätzliche Prozesse und Build-Tools erforderlich, um sicherzustellen, dass das notwendige CSS – und idealerweise nur der wichtige CSS – korrekt eingefügt ist und zusätzlicher CSS-Code so bereitgestellt wird, dass das Rendering nicht blockiert wird.

Vorverbindung zu wichtigen Drittanbieterursprüngen herstellen

Wenn auf Ihrer Website Schriftarten von der Website eines Drittanbieters geladen werden, sollten Sie unbedingt den Ressourcenhinweis preconnect verwenden, um frühzeitig eine Verbindung zur Drittanbieterquelle herzustellen. Ressourcenhinweise sollten im Dokument „<head>“ platziert werden. Der Ressourcenhinweis unten richtet eine Verbindung zum Laden des Schriftart-Stylesheets ein.

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

Um die Verbindung, die zum Herunterladen der Schriftartdatei verwendet wird, vorab herzustellen, fügen Sie einen separaten preconnect-Ressourcenhinweis mit dem Attribut crossorigin hinzu. Im Gegensatz zu Stylesheets müssen Schriftdateien über eine CORS-Verbindung gesendet werden.

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

Wenn du den Ressourcenhinweis zu „preconnect“ verwendest, solltest du beachten, dass ein Schriftanbieter Stylesheets und Schriftarten mit unterschiedlichen Ursprüngen bereitstellen kann. So würde zum Beispiel 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

preload ist zwar sehr effektiv darin, Schriftarten schon früh beim Seitenaufbau sichtbar zu machen, allerdings gehen die Browserressourcen durch das Laden anderer Ressourcen verloren.

Möglicherweise ist es ein effektiverer Ansatz, Schriftdeklarationen einzufügen und Stylesheets anzupassen. Mit diesen Anpassungen möchten wir der Ursache für spät erkannte Schriftarten näherkommen und nicht nur eine Problemumgehung anbieten.

Außerdem sollte preload beim Laden von Schriftarten mit Bedacht eingesetzt werden, da damit einige der integrierten Aushandlungsstrategien des Browsers umgangen werden. preload ignoriert beispielsweise unicode-range-Deklarationen und sollte bei einer umsichtigen Verwendung nur zum Laden eines einzelnen Schriftformats verwendet werden.

Bei der Verwendung von externen Stylesheets kann das Vorabladen der wichtigsten Schriftarten jedoch sehr effektiv sein, da der Browser sonst erst lange später erkennt, ob die Schriftart benötigt wird.

Bereitstellung von Schriftarten

Eine schnellere Schriftartenbereitstellung ermöglicht ein schnelleres Textrendering. Wird eine Schriftart früh genug bereitgestellt, lassen sich außerdem Layoutverschiebungen vermeiden, die durch den Austausch der Schriftart entstehen.

Selbstgehostete Schriftarten verwenden

Auf dem Papier ist die Verwendung einer selbst gehosteten Schriftart in der Regel eine bessere Leistung, da keine Drittanbieterverbindung hergestellt werden muss. In der Praxis sind die Leistungsunterschiede zwischen diesen beiden Optionen jedoch weniger deutlich. So ergab beispielsweise der Web Almanac, dass Websites mit Drittanbieterschriften schneller gerendert werden als mit eigenen Schriftarten.

Wenn Sie selbst gehostete Schriftarten verwenden möchten, vergewissern Sie sich, dass Sie für Ihre Website ein Content Delivery Network (CDN) und HTTP/2 verwenden. Ohne den Einsatz dieser Technologien ist es viel weniger wahrscheinlich, dass selbst gehostete Schriftarten eine bessere Leistung erzielen. 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 von Drittanbietern normalerweise automatisch bereitgestellt werden, z. B. eine Untereinstellung für Schriftarten und die WOFF2-Komprimierung. Der für die Anwendung dieser Optimierungen erforderliche Aufwand hängt zum Teil von den Sprachen ab, die Ihre Website unterstützt. Besonders auffällig ist die Optimierung von Schriftarten für CJK-Sprachen.

WOFF2 verwenden

Unter den modernen Schriftarten ist WOFF2 die neueste Version, die am breitesten von Browsern unterstützt und die beste Komprimierung bietet. Aufgrund der Verwendung von Brotli wird WOFF2 um 30% besser komprimiert als WOFF, was weniger Daten zum Herunterladen und damit eine höhere Leistung zur Folge hat.

Aufgrund der Browserunterstützung empfehlen Experten jetzt nur noch WOFF2:

Wir glauben sogar, dass es an der Zeit ist, nur mit WOFF2 zu kommunizieren und alles andere zu vergessen.

Dadurch werden Ihr CSS-Code und Ihre Workflows erheblich vereinfacht und versehentlich doppelte oder falsche Schriftartdownloads vermieden. WOFF2 wird jetzt überall unterstützt. Wenn Sie also keine sehr alten Browser unterstützen müssen, verwenden Sie einfach WOFF2. Wenn dies nicht möglich ist, sollten Sie in Betracht ziehen, für diese älteren Browser überhaupt keine Webschriftarten bereitzustellen. Dies ist kein Problem, wenn Sie eine robuste Fallback-Strategie haben. Besucher mit älteren Browsern sehen lediglich Ihre Fallback-Schriftarten.

Bram Stein, 2022 Web Almanac

Untermengenschriftarten

Schriftartdateien enthalten normalerweise eine große Anzahl von Glyphen für die verschiedenen unterstützten Zeichen. Möglicherweise benötigen Sie jedoch nicht alle Zeichen auf Ihrer Seite. Sie können die Größe der Schriftartdateien verringern, indem Sie für bestimmte Schriftarten eine Untereinstellung festlegen.

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 üblicherweise für die Bereitstellung verschiedener Schriftartdateien verwendet, je nach der für den Seiteninhalt verwendeten Sprache.

unicode-range wird häufig in Verbindung mit der Technik der Untereinstellung verwendet. Eine Schriftart enthält einen kleineren Teil der Glyphen, die in der ursprünglichen Schriftartdatei enthalten waren. Anstatt beispielsweise allen Nutzern alle Zeichen bereitzustellen, könnte eine Website separate Teilmengen von Schriftarten für lateinische und kyrillische Zeichen generieren. Die Anzahl der Glyphen pro Schriftart variiert drastisch: Lateinische Schriftarten haben in der Regel eine Größe von 100 bis 1.000 Glyphen pro Schriftart,CJK-Schriftarten können über 10.000 Zeichen umfassen. Wenn Sie nicht verwendete Glyphen entfernen, kann sich die Dateigröße einer Schriftart erheblich verringern.

Einige Schriftartenanbieter stellen möglicherweise automatisch verschiedene Versionen von Schriftartendateien mit unterschiedlichen Teilmengen bereit. Bei Google Fonts geschieht dies 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;
}

Beim Wechsel zur Selbsthosting-Funktion ist dies eine Optimierung, die leicht übersehen werden kann und lokal zu größeren Schriftdateien führt.

Es ist auch möglich, Schriftarten manuell in Teilmengen zu unterteilen, sofern Ihr Schriftartanbieter dies zulässt – entweder über eine API (Google Fonts unterstützt dies durch die Bereitstellung eines text-Parameters) oder indem Sie die Schriftartdateien manuell bearbeiten und anschließend selbst hosten. Zu den Tools zum Generieren von Schriftart-Teilmengen gehören subfont und glyphanger. Sie sollten jedoch die Lizenz für die verwendeten Schriftarten prüfen, die Untereinstellungen und Selbsthosting zulassen.

Weniger Webschriftarten verwenden

Die schnellste Schriftart, die ausgeliefert werden kann, ist eine Schriftart, die nicht von vornherein angefordert wird. Systemschriften und variable Schriftarten sind zwei Möglichkeiten, die Anzahl der auf Ihrer Website verwendeten Schriftarten im Web zu reduzieren.

Eine Systemschrift ist die Standardschriftart, die von der Benutzeroberfläche eines Nutzergeräts 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 den Fließtext.

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

font-family: system-ui

Die Idee hinter variablen Schriftarten ist, dass eine Schriftart mit einer Variablen als Ersatz für mehrere Schriftartdateien verwendet werden kann. Für variable Schriftarten wird ein Standardschriftstil definiert und Achsen zur Bearbeitung der Schriftart festgelegt. Beispielsweise könnte eine variable Schriftart mit einer Weight-Achse verwendet werden, um Buchstaben zu implementieren, für die zuvor separate Schriftarten für helles, reguläres, fett und extrafetter Text erforderlich waren.

Nicht alle profitieren von einer Umstellung auf variable Schriftarten. Variable Schriftarten enthalten viele Stile. Die Dateien sind daher normalerweise größer als einzelne nicht variable Schriftarten, die nur einen Stil enthalten. Die größte Verbesserung durch den Einsatz von variablen Schriftarten werden bei Websites feststellen, die eine Vielzahl von Schriftstilen und -stärken verwenden (und müssen).

Schrift-Rendering

Wenn der Browser mit einer noch nicht geladenen Web-Schriftart konfrontiert ist, stellt er sich vor: Sollte er mit dem Rendern von Text warten, bis die Web-Schriftart verfügbar ist? Oder soll der Text so lange in einer Fallback-Schriftart gerendert werden, bis die Webschrift erscheint?

Verschiedene Browser behandeln dieses Szenario unterschiedlich. Standardmäßig blockieren Chromium-basierte und Firefox-Browser das Textrendering für bis zu 3 Sekunden, wenn die entsprechende Webschriftart nicht geladen wurde. Safari blockiert das Rendern von Text auf unbestimmte Zeit.

Dieses Verhalten kann mit dem Attribut font-display konfiguriert werden. Das kann erhebliche Auswirkungen haben: font-display kann die LCP-, FCP- und Layoutstabilität beeinträchtigen.

Geeignete font-display-Strategie auswählen

font-display gibt an, wie der Browser 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 Tauschphase
Automatisch Je nach Browser Je nach Browser
Block 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 während des Sperrzeitraums die Webschrift nicht verfügbar ist, wird die Schriftart in einer unsichtbaren Fallback-Schriftart gerendert, sodass der Text für den Nutzer nicht sichtbar ist. Ist die Schriftart am Ende des Blockierungszeitraums nicht verfügbar, wird sie in der Fallback-Schriftart gerendert.
  • Austauschzeitraum: Der Austauschzeitraum liegt nach dem Sperrzeitraum. Wenn die Webschriftart während des Zeitraums verfügbar wird, wird sie ausgetauscht.

font-display-Strategien spiegeln unterschiedliche Sichtweisen in Bezug auf den Kompromiss zwischen Leistung und Ästhetik wider. Daher ist es schwierig, einen empfohlenen Ansatz zu empfehlen, da dieser von den individuellen Vorlieben, der Bedeutung der Webschriftart für die Seite und der Marke und davon abhängt, wie groß die spät ankommende Schriftart beim Austausch sein kann.

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

  • Wenn Leistung an erster Stelle steht:Verwenden Sie font-display: optional. Dies ist der „leistungsfähigste“ Ansatz: Das Rendern des Textes wird um maximal 100 ms verzögert und es ist sicher, dass es keine Layoutverschiebungen aufgrund des Wechsels der Schriftart gibt. Der Nachteil ist, dass die Web-Schriftart nicht verwendet wird, wenn sie zu spät eintrifft.

  • Wenn die schnelle Anzeige von Text oberste Priorität hat, Sie aber trotzdem die Webschrift verwenden möchten:Verwenden Sie font-display: swap, stellen Sie aber sicher, dass Sie die Schriftart früh genug bereitstellen, damit es nicht zu einer Layoutverschiebung kommt. Der Nachteil dieser Option ist die irritierende Verschiebung, wenn die Schriftart zu spät eintrifft.

  • Wenn sicherzustellen, dass der Text in einer Webschriftart angezeigt wird, verwenden Sie font-display: block. Stellen Sie aber sicher, dass die Schriftart früh genug bereitsteht, damit die Verzögerung des Texts minimiert wird. Der Nachteil ist, dass die anfängliche Textanzeige verzögert angezeigt wird. Hinweis: Trotz dieser Darstellung kann es dennoch zu einer Layoutverschiebung kommen, da der Text tatsächlich unsichtbar wird. Daher wird die Fallback-Schriftart verwendet, um den Platz zu reservieren. Sobald die Webschriftart geladen ist, ist möglicherweise Platz für Differenzen und somit eine Verschiebung erforderlich. Dies kann jedoch eine weniger gravierende Verschiebung als font-display: swap sein, da sich der Text selbst nicht verschiebt.

Denken Sie außerdem daran, dass diese beiden Ansätze kombiniert werden können. Verwenden Sie beispielsweise font-display: swap für Branding und andere optisch unverwechselbare Seitenelemente und font-display: optional für Schriftarten im Fließtext.

Reduzieren Sie die Abweichung zwischen Fallback-Schriftart und Webfont.

Sie können die neuen size-adjust-Attribute verwenden, um die CLS-Auswirkungen zu reduzieren. Weitere Informationen finden Sie im Artikel zu Preisvergleichsportalen size-adjust. Dies ist eine ganz neue Ergänzung unseres Toolset und ist derzeit komplexer und daher ein wenig manueller Natur. Aber auf jeden Fall einer, mit dem Sie experimentieren und die Tools in Zukunft verbessern können!

Fazit

Webschriftarten stellen immer noch ein Leistungsengpass dar, aber wir haben eine stetig wachsende Palette an Optionen, um sie zu optimieren und diesen Engpass so weit wie möglich zu reduzieren.