Drittanbieter-Schriftarten

Es ist unglaublich wichtig, Schriftarten schnell bereitzustellen: Eine schnellere Bereitstellung von Schriftarten bedeutet nicht nur, dass der Text für Nutzer schneller sichtbar ist, sondern hat auch einen großen Einfluss darauf, ob eine Schriftart Layoutverschiebungen verursacht. Wenn eine Schriftart nicht geliefert werden kann, bevor sie benötigt wird, kommt es normalerweise zu einem Layoutverschiebung, wenn die Schriftart ausgetauscht wird. Die Größe dieser Layoutverschiebung kann variieren, je nachdem, wie genau die Fallback-Schriftart der Webschriftart entspricht. Um dieses Phänomen in Aktion zu sehen, sehen Sie sich die Demo an und vergleichen Sie die Layoutverschiebungen bei einer schnellen Verbindung mit einer langsamen Verbindung.

Im folgenden Beispiel werden zwei Leistungstechniken kombiniert, um eine Drittanbieterschrift so schnell wie möglich zu laden: die Verwendung von Inline-Schriftartdeklarationen und die Verwendung von preconnect-Ressourcenhinweisen. In diesem Code-Snippet wird zwar gezeigt, wie Schriftarten aus Google Fonts geladen werden, diese Techniken gelten jedoch auch für andere Drittanbieter von Schriftarten.

  • Inline-Schriftartdeklarationen: Wenn font-family-Deklarationen inline in das Hauptdokument eingefügt werden, anstatt diese Informationen in ein externes Stylesheet aufzunehmen, kann der Browser bestimmen, welche Schriftartdateien auf der Seite verwendet werden, ohne auf den Download einer separaten Stylesheet-Datei warten zu müssen. Das ist wichtig, da Browser Schriftartdateien in der Regel erst herunterladen, wenn sie wissen, dass sie auf der Seite verwendet werden. In den meisten Fällen sind Inline-Schriftartdeklarationen vorzugsweise die Verwendung von preload zum Laden von Schriftarten.

  • Vorverbindung herstellen: Zum Laden von Google Fonts wird empfohlen, das Tag <link> zusammen mit preconnect-Ressourcenhinweisen zu verwenden. Der Ressourcenhinweis preconnect stellt eine frühe Verbindung mit dem Drittanbieterursprung her. Im folgenden Code-Snippet stellt der erste Ressourcenhinweis eine Verbindung zum Herunterladen des Schriftart-Stylesheets her. Der zweite Ressourcenhinweis richtet eine Verbindung zum Herunterladen von Schriftartdateien ein.

Beispiel:

HTML

<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: system-ui;
            font-size: 1em;
        }
        h1 {
            font-family: 'Zen Tokyo Zoo', sans-serif;
            font-size: 3em;
        }
    </style>
</head>