Webfonts und Performance: Schriften ohne Ladezeit-Strafe

Eine schöne Schrift macht aus einer beliebigen Webseite eine, die nach Ihnen klingt. Sie trägt die Stimmung, sie schafft Vertrauen, sie hebt Sie von der Konkurrenz ab. Nur hat dieser Auftritt einen Preis, den viele übersehen: Schriften müssen geladen werden, und wenn das schiefgeht, ruckelt der erste Eindruck.

In diesem Beitrag zeige ich, warum Webfonts die Ladezeit belasten können, was dabei am meisten nervt, und wie Sie schöne Typografie bekommen, ohne dafür mit Tempo zu bezahlen. Ganz ohne Technik-Kauderwelsch.

Warum Schriften überhaupt zur Last werden

Auf Ihrem Computer ist die Schrift einfach da. Im Web ist das anders: Jede Schrift, die nicht standardmässig auf dem Gerät des Besuchers liegt, muss erst über das Internet nachgeladen werden, als eigene Datei, zusätzlich zu allem anderen.

Und solche Schriftdateien sind oft überraschend schwer. Eine Familie mit mehreren Schnitten, normal, fett, kursiv, kann schnell mehrere hundert Kilobyte wiegen. Das klingt nach wenig, doch unterwegs, bei wackeligem Empfang, sind das wertvolle Sekunden. Genau dann, wenn der Besucher entscheidet, ob er bleibt.

Das nervigste Problem: springender Text

Es gibt einen Effekt, den fast jeder kennt, ohne ihn benennen zu können: Man öffnet eine Seite, fängt an zu lesen, und plötzlich springt alles eine Zeile nach unten, weil jetzt erst die richtige Schrift geladen ist. Das ist Layout-Shift, und es ist der grösste Ärger rund um Webfonts.

Das passiert, weil die Ersatzschrift, die zuerst angezeigt wird, etwas anders breit und hoch ist als die endgültige. Wenn die echte Schrift eintrifft, rückt alles neu zusammen. Im besten Fall wirkt das unruhig, im schlimmsten klickt man danebeneben, weil der Knopf in dem Moment weghüpft.

Google bewertet genau das mit, unter dem Stichwort Cumulative Layout Shift. Eine ruhige, stabile Seite zählt also nicht nur für das Auge, sondern auch fürs Ranking. Mehr dazu finden Sie in meinen weiteren Beiträgen rund um Tempo und Core Web Vitals.

Der zweite Stolperstein: unsichtbarer Text

Es gibt noch eine andere Variante, die fast schlimmer ist. Manche Seiten verstecken den Text komplett, bis die Schrift geladen ist. Der Besucher starrt also auf eine leere Fläche, obwohl der Inhalt längst da wäre. Fachleute nennen das den unsichtbaren Text.

Beides, springender und unsichtbarer Text, lässt sich vermeiden. Es ist eine Frage davon, wie sorgfältig die Schrift eingebunden wurde.

Wie Webfonts schnell und ruhig laden

Die gute Nachricht: Man muss nicht zwischen schöner Schrift und guter Performance wählen. Mit ein paar bewährten Handgriffen bekommen Sie beides. Das sind die wirksamsten Hebel:

• Nur laden, was gebraucht wird: Oft reichen zwei oder drei Schnitte statt der ganzen Familie. Jeder weggelassene Schnitt ist eine Datei weniger.
• Die Schrift selbst ausliefern: Statt sie bei einem fremden Dienst zu holen, lege ich die Schriftdatei direkt zur Webseite. Das spart einen Umweg und ist erst noch datenschutzfreundlicher.
• Moderne, schlanke Formate nutzen: Das Format WOFF2 ist deutlich kleiner als ältere Schriftdateien, gleiche Schrift, weniger Gewicht.
• Den Browser früh Bescheid geben: Mit einem kleinen Hinweis im Code lädt die Schrift schon, während der Rest der Seite aufgebaut wird, statt erst danach.
• Den Text sofort zeigen: Der Browser darf den Inhalt zuerst in einer Ersatzschrift anzeigen und still auf die richtige umstellen. So sieht niemand eine leere Seite.

Wie man das Springen ganz vermeidet

Der Trick gegen den springenden Text ist erstaunlich einfach: Man wählt eine Ersatzschrift, die der endgültigen ähnlich sieht, und stimmt beide so aufeinander ab, dass sie etwa gleich viel Platz brauchen. Trifft die echte Schrift ein, ändert sich fast nichts mehr, kein Sprung, kein Ruckeln.

Das ist Feinarbeit, die man der fertigen Seite nicht ansieht. Aber genau diese unsichtbaren Details entscheiden, ob sich eine Seite wertig und ruhig anfühlt oder hektisch. Und es ist viel leichter, das von Anfang an richtig zu bauen, als es später nachzubessern.

Reichen nicht auch Standardschriften?

Eine berechtigte Frage. Es gibt Schriften, die auf praktisch jedem Gerät vorhanden sind, die müssen gar nicht geladen werden und sind damit blitzschnell. Für manche Projekte sind sie eine ehrliche, gute Wahl.

Aber eine eigene Schrift ist oft ein grosser Teil des Charakters einer Marke. Mein Ansatz ist deshalb pragmatisch: eine ausgesuchte Schrift dort, wo sie wirkt, sauber eingebunden, ergänzt durch eine gut abgestimmte Ersatzschrift. So bekommen Sie den Charakter, ohne die Strafe.

Charakter und Tempo schliessen sich nicht aus

Webfonts sind kein notwendiges Übel, sondern ein Werkzeug, und wie jedes Werkzeug entscheidet die Sorgfalt über das Ergebnis. Richtig eingesetzt, lädt eine schöne Schrift fast unbemerkt, ohne dass etwas springt oder hängt. Falsch eingesetzt, kostet sie Geduld und Vertrauen.

Deshalb baue ich Schriften von Hand ein und prüfe, dass sie schnell und ruhig laden, damit Ihr Auftritt nicht nur gut aussieht, sondern sich auch gut anfühlt. Wenn Ihre Seite beim Laden zappelt oder zäh wirkt, schaue ich gern, woran es liegt. Melden Sie sich einfach über das Kontaktformular, und wir besprechen es in Ruhe.