Schriftarten und Ladezeit: Webfonts richtig einbinden

Schrift trägt fast alles, was ein Besucher auf einer Website liest. Sie prägt den ersten Eindruck, führt durch den Text und entscheidet mit darüber, wie hochwertig ein Auftritt wirkt. Zugleich bringt jede eingebundene Schriftart eine eigene Datei mit – und damit einen Weg, den der Browser zurücklegt, bevor der erste Buchstabe erscheint.

Die dafür benötigte Zeit entscheidet sich an wenigen Punkten: an der Zahl der eingebundenen Schnitte, am Format der Dateien, an ihrem Speicherort und an der Art, wie der Browser die Wartezeit überbrückt. Mit Bedacht gewählt, fügen sich Gestaltung und Geschwindigkeit reibungslos zusammen.

Der Anteil der Schrift an der Ladezeit

Eine Schriftdatei ist eine zusätzliche Anfrage an den Server, und sie erreicht den Browser an einer empfindlichen Stelle: Er benötigt sie, um Text darzustellen. Solange die Datei unterwegs ist, bleibt der Text entweder verborgen oder erscheint in einer Ersatzschrift, die anschließend gegen die endgültige getauscht wird. Beides bemerken Besucher, und beides schlägt sich in den Werten nieder, mit denen Google die Nutzererfahrung misst.

Auf einem Rechner mit schneller Leitung fällt das wenig ins Gewicht. Über Mobilfunk und auf älteren Geräten summieren sich vier Schriftschnitte dagegen zu einer Verzögerung, die den Aufbau der ganzen Seite ausbremst.

Die richtige Zahl an Schnitten

Jeder Schnitt ist eine eigene Datei: Regular, Kursiv, Halbfett und Fett ergeben vier Dateien für eine einzige Schriftfamilie. Den meisten Auftritten reichen zwei davon – Regular für den Fließtext, Halbfett für Überschriften. Aus diesem Paar entsteht schon eine klare Hierarchie, während die Seite leicht bleibt.

Variable Schriften führen den Gedanken weiter. Sie halten sämtliche Stärken in einer einzigen Datei bereit, aus der der Browser jede gewünschte Abstufung erzeugt. Für Gestaltungen mit vielen Zwischenstufen ist das die sparsamste Form. Welche Wirkung die Schriftwahl darüber hinaus auf Lesbarkeit und Vertrauen hat, beschreibt der Beitrag zur Typografie im Webdesign.

Der eigene Server als Speicherort

Die Auslieferung vom eigenen Server bringt zwei Vorteile mit sich. Technisch entfällt der Umweg über eine fremde Domain samt der Zeit, die deren Verbindungsaufbau kostet. Rechtlich bleiben die Daten der Besucher im eigenen Haus: Seit einem vielbeachteten Urteil des Landgerichts München I gilt das Einbinden von Google Fonts über Googles Server als heikel, weil dabei die IP-Adresse jedes Besuchers übertragen wird. Liegen die Dateien im eigenen Verzeichnis, ist diese Frage geklärt.

Als Format hat sich WOFF2 durchgesetzt; es fällt spürbar kompakter aus als seine Vorgänger und wird von allen aktuellen Browsern gelesen. Ergänzend hilft ein Zeichensatz, der auf die tatsächlich gebrauchten Zeichen begrenzt ist – für deutschsprachige Seiten reicht der lateinische Bereich in aller Regel aus. Ein verlässliches Hosting liefert die Dateien anschließend über kurze Wege aus.

Die Wartezeit überbrücken

Zwischen dem Aufruf einer Seite und dem Eintreffen der Schrift liegt ein kurzer Moment, der sich gestalten lässt. Ein früher Ladehinweis im Kopfbereich sorgt dafür, dass die wichtigste Schriftdatei gemeinsam mit dem Stylesheet unterwegs ist und die Wartezeit dadurch schrumpft. Die CSS-Angabe „font-display" mit dem Wert „swap" zeigt den Text währenddessen in einer Ersatzschrift, sodass Lesen sofort möglich ist.

Damit dieser Wechsel ruhig verläuft, empfiehlt sich eine Ersatzschrift, die der endgültigen in Breite und Höhe nahekommt – dann bleiben die Zeilen an ihrem Platz, sobald die Webschrift greift. Eine großzügige Zwischenspeicherung rundet das ab: Folgeseiten greifen auf die schon geladene Datei zu und stehen augenblicklich bereit.

Der Sonderfall Systemschriften

Den kürzesten Weg gehen Seiten, die auf die Schriften des Betriebssystems zurückgreifen. Diese liegen schon auf dem Gerät und stehen mit dem ersten Bildaufbau zur Verfügung. Für Projekte, bei denen Geschwindigkeit den Ausschlag gibt, ist das die klarste Lösung; moderne Systemschriften wirken zudem gepflegt und vertraut.

Für einen eigenständigen Markenauftritt trägt dagegen eine bewusst gewählte Webschrift, sparsam eingesetzt: eine Familie, zwei Schnitte, selbst gehostet. Diese Mischung verbindet Wiedererkennung mit kurzen Ladezeiten, wie sie eine moderne Website von Haus aus auszeichnet.

Folgen für die Sichtbarkeit

Erscheint der Text gleich zu Beginn, bleiben Besucher eher, die Verweildauer steigt, und Inhalte erhalten die Aufmerksamkeit, für die sie geschrieben wurden. Google wertet dieses Erlebnis über die Core Web Vitals aus, in denen ein früh sichtbarer Hauptinhalt und ein ruhiges Layout unmittelbar zu Buche schlagen.

Eine zurückhaltend eingebundene Typografie zahlt damit auf dieselbe Grundlage ein wie guter Inhalt und ein gepflegtes Linkprofil: Sie sorgt dafür, dass die Substanz einer Seite ankommt und aus einzelnen Besuchen wiederkehrender SEO-Traffic wird.

Fazit

Gestaltung und Geschwindigkeit stehen bei Schriften selten im Widerspruch. Zwei Schnitte im Format WOFF2, ausgeliefert vom eigenen Server, dazu ein früher Ladehinweis und eine passende Ersatzschrift genügen, damit eine Seite gestalterisch überzeugt und zügig erscheint. Ihren vollen Nutzen entfaltet eine schnelle Seite, sobald Menschen den Weg zu den Inhalten finden – dafür sorgt Early Linkbuilding mit gezieltem Linkaufbau und Inhalten voller Substanz.