Schriften prägen, wie eine Website wirkt, oft stärker als Farben. Eine eigene Schrift macht den Auftritt wiedererkennbar. Gleichzeitig gehören Schriften zu den häufigsten Gründen, warum Seiten langsam erscheinen, und bei falscher Einbindung auch zu einem Datenschutzproblem.
Beides lässt sich mit wenig Aufwand lösen.
Warum Schriften die Ladezeit beeinflussen
Bevor der Browser Text in einer eigenen Schrift anzeigen kann, muss er die Schriftdatei laden. Je nach Einstellung zeigt er bis dahin gar keinen Text oder eine Ersatzschrift. Kommt die Datei von einem fremden Server, muss der Browser zuerst eine Verbindung dorthin aufbauen. Das kostet zusätzliche Zeit.
Dazu kommt die Menge. Jede Stärke und jede Kursive ist eine eigene Datei. Eine Website mit Regular, Medium, Bold und jeweils Kursiv lädt schnell sechs bis acht Schriftdateien, bevor alles richtig aussieht.
Bei PageSpeed Insights erscheinen solche Schriften oft unter dem Hinweis, dass Ressourcen das Rendering blockieren.
Google Fonts und die DSGVO
Google Fonts ist eine große, kostenlose Sammlung von Schriften. Viele Website-Baukästen, Themes und Plugins binden sie direkt von den Servern von Google ein. Dabei wird beim Seitenaufruf die IP-Adresse des Besuchers an Google übertragen.
Das Landgericht München I hat im Januar 2022 (öffnet in neuem Tab) entschieden (Az. 3 O 17493/20), dass das ohne Einwilligung gegen die DSGVO verstößt, und einem Besucher 100 Euro Schadensersatz zugesprochen. Danach rollte eine Welle von Abmahnschreiben durch Deutschland.
Die Lösung ist einfach. Die Schriften selbst stehen unter freien Lizenzen und dürfen auf dem eigenen Server liegen. Lokal eingebunden wird keine Verbindung zu Google aufgebaut, und eine Einwilligung ist dafür nicht nötig. Das ist keine Rechtsberatung, im Zweifel fragst du eine Fachanwältin.
So prüfst du deine Website
- Öffne deine Website im Browser und dann die Entwicklertools, meist mit F12.
- Wechsle in den Bereich Netzwerk und lade die Seite neu.
- Gib im Filter „fonts“ ein.
Tauchen Adressen mit fonts.googleapis.com oder fonts.gstatic.com auf, werden die Schriften von Google geladen. Prüf das auf mehreren Seiten, denn manche Plugins laden Schriften nur auf einzelnen Unterseiten, etwa mit einer eingebetteten Karte.
Google Fonts lokal einbinden
- Schrift herunterladen: auf fonts.google.com (öffnet in neuem Tab) oder über Werkzeuge, die die Dateien gleich im passenden Format liefern.
- Format WOFF2 verwenden: Es ist für das Web gemacht, stark komprimiert und wird von allen aktuellen Browsern unterstützt. Ältere Formate wie TTF oder EOT brauchst du nicht mehr.
- Nur die nötigen Schnitte nehmen: meist Regular und Bold, vielleicht eine Kursive. Für variable Schriften reicht oft eine einzige Datei für alle Stärken.
- Dateien auf den eigenen Server legen und im CSS mit @font-face einbinden.
- Alte Einbindung entfernen: den Link zu Google im Kopfbereich, in Theme-Einstellungen oder Plugins. Viele Themes haben dafür eine eigene Option.
- Erneut prüfen: mit den Entwicklertools wie oben beschrieben.
Bei Webflow lassen sich eigene Schriftdateien in den Projekteinstellungen hochladen. Was bei Webflow sonst für den Datenschutz wichtig ist, steht im Ratgeber Webflow und die DSGVO. Bei WordPress gibt es Plugins, die Google Fonts automatisch lokal speichern.
Schneller laden mit drei Einstellungen
font-display swap
Mit der CSS-Eigenschaft font-display swap zeigt der Browser den Text sofort in einer Ersatzschrift an und tauscht sie aus, sobald die eigene Schrift geladen ist. So müssen Besucher nicht auf leere Flächen schauen.
Die wichtigste Schrift vorladen
Mit einem Preload-Hinweis im Kopfbereich der Seite lädt der Browser die Schrift der Hauptüberschrift oder des Fließtexts besonders früh. Das lohnt sich für eine, höchstens zwei Dateien, nicht für alle.
Passende Ersatzschrift
Wenn die Ersatzschrift deutlich breiter oder schmaler ist als deine eigene, springt der Text beim Austausch. Das verschlechtert den CLS-Wert. Eine ähnlich breite Systemschrift als Ersatz oder angepasste Abstände im CSS verhindern das.
Die passende Schriftart für die Website wählen
Neben der Technik zählt die Auswahl. Ein paar Grundregeln:
- Eine bis zwei Familien: eine für Überschriften, eine für Fließtext. Oder eine einzige Schrift in zwei Stärken.
- Lesbarkeit vor Originalität: Für Fließtext eignen sich ruhige Schriften mit offenen Formen. Auffällige Schriften gehören in Überschriften.
- Deutsche Sonderzeichen prüfen: Umlaute, ß und Anführungszeichen „so“ sollten sauber gestaltet sein.
- Mindestens 16 Pixel für Fließtext: auf dem Handy und am Rechner, mit einem Zeilenabstand um das 1,5-Fache der Schriftgröße.
- Guter Kontrast: Grauer Text auf grauem Grund wirkt elegant, ist aber schwer zu lesen. Die WCAG verlangen für normalen Text mindestens 4,5 zu 1.
Wie Schrift, Abstände und Farben zusammen eine ruhige Seite ergeben, steht im Beitrag Was gutes Webdesign ausmacht.
Und Systemschriften?
Die schnellste Schrift ist eine, die nicht geladen werden muss. Systemschriften sind auf jedem Gerät schon vorhanden, auf dem Mac etwa San Francisco, auf Windows Segoe UI. Für Fließtext ist das eine gute Wahl, wenn die Überschriften eine eigene Schrift bekommen. Der Nachteil ist, dass die Seite auf jedem Gerät etwas anders aussieht.
Kurz zusammengefasst
Schriften gehören auf deinen eigenen Server, nicht auf die von Google oder anderen Anbietern. Das schützt deine Besucher und spart Ladezeit. Beschränke dich auf wenige Schnitte im Format WOFF2, nutze font-display swap und lade die wichtigste Schrift vorab.
Wenn auch andere fremde Dienste auf deiner Seite Daten übertragen, etwa für Statistik, hilft der Beitrag Umami Analytics als Google-Analytics-Alternative. Und wenn du wissen willst, was deine Website sonst ausbremst, schau ich mir deine Startseite im kostenlosen Kurz-Check an. Mehr dazu unter Performance-Optimierung.
Titelbild: Foto über rawpixel, Lizenz CC0 (öffnet in neuem Tab), gefunden über Openverse.
