Selbst gehostete Schriftarten

Selbstgehostete Schriftarten sind Schriftartdateien, die von Ihren eigenen Servern und nicht von einem Drittanbieter für Schriftarten (z. B. Google Fonts) bereitgestellt werden.

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 Leistungsmethoden kombiniert, um eine selbst gehostete Schriftart so schnell wie möglich bereitzustellen: die Verwendung von Inline-Schriftartdeklarationen und die Verwendung des WOFF2-Schriftartformats.

  • Inline-Schriftartdeklarationen: Wenn die @font-face- und font-family-Deklarationen in das Hauptdokument eingebunden 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.

  • WOFF2: Von den modernen Schriftarten ist WOFF2 die neueste, bietet die breiteste Browserunterstützung und bietet die beste Komprimierung. Durch den Einsatz von Brotli wird WOFF2 um 30% besser komprimiert als WOFF.

Um die Leistung weiter zu verbessern, können Sie die Untereinstellung für Schriftarten verwenden. Bei der Unterteilung von Schriftarten wird eine Schriftartdatei in kleinere Teilmengen aufgeteilt – in der Regel mit dem Ziel, nicht verwendete Glyphen zu entfernen. Dadurch kann die Dateigröße einer Schriftart erheblich reduziert werden. Zu den Tools zum Erstellen von Schriftart-Teilmengen gehören fontkit, subfont und glyphhanger.

Weitere Informationen zu Best Practices für selbst gehostete Schriftarten finden Sie unter Selbst gehostete Schriftarten verwenden.

Beispiel:

HTML

<head>
    <style>
        @font-face {
            font-family: 'Google Sans';
            src: url("Google Sans.woff2") format('woff2');
            font-display: swap;
        }
        body {
            font-family: system-ui;
            font-size: 1em;
        }
        h1 {
            font-family: 'Google Sans', sans-serif;
            font-size: 3em;
        }
    </style>
</head>