Farbe und Typografie
Schriften lokal einbinden
Warum Webfonts auf den eigenen Server gehören, wie Sie Google Fonts korrekt lokal einbinden und mit welchen vier Handgriffen Schrift die Seite nicht ausbremst.
· Redaktion websitefun.de
Schrift ist auf einer Website zweierlei: der Träger fast aller Information und eine Datei, die geladen werden muss, bevor der Text lesbar wird. Beide Seiten geraten leicht in Konflikt.
Warum die Dateien auf den eigenen Server gehören
Die übliche Einbindung von Google Fonts sieht so aus:
<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet">Bei jedem Seitenaufruf baut der Browser damit eine Verbindung zu einem Server von Google auf und überträgt dabei die IP-Adresse des Besuchers. Das Landgericht München hat 2022 entschieden, dass darin ohne Einwilligung ein Eingriff in das Persönlichkeitsrecht liegt, und einem Kläger Schadenersatz zugesprochen. In der Folge sind massenhaft Abmahnschreiben verschickt worden.
Unabhängig von der Rechtslage ist die Einbindung über einen fremden Server auch technisch schlechter: Der Browser muss eine zusätzliche Verbindung aufbauen, und der Schutz vor Verfolgung über Websites hinweg in aktuellen Browsern hat den früheren Vorteil eines gemeinsamen Zwischenspeichers ohnehin beseitigt. Dieselbe Schrift wird für jede Website erneut geladen.
Die Lösung ist in zehn Minuten erledigt: Dateien herunterladen, auf den eigenen Server legen, im eigenen CSS einbinden. Die Lizenz der allermeisten Google Fonts erlaubt das ausdrücklich.
So sieht die lokale Einbindung aus
@font-face {
font-family: "Inter";
src: url("/fonts/inter-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("/fonts/inter-bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
body {
font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}Vier Punkte daran sind wichtig:
Nur WOFF2. Das Format ist deutlich kleiner als seine Vorgänger und wird von jedem Browser gelesen, der heute im Einsatz ist. Zusätzliche Formate wie WOFF, TTF oder EOT anzugeben ist Ballast aus einer vergangenen Zeit.
Ein @font-face je Schnitt, mit korrektem font-weight. Wer nur die Regular-Datei einbindet und im CSS font-weight: 700 setzt, bekommt keine echte fette Schrift, sondern eine vom Browser künstlich verdickte. Das sieht sichtbar schlechter aus.
font-display: swap. Ohne diese Angabe bleibt der Text bis zu drei Sekunden unsichtbar, während die Schrift lädt. Mit ihr zeigt der Browser sofort die Ersatzschrift und tauscht später.
Eine Ersatzkette, die etwas taugt. system-ui nimmt die Schrift, die das Betriebssystem ohnehin für Oberflächen benutzt – sie ist immer da und lädt in null Sekunden.
Vorladen für den ersten Bildschirmausschnitt
Die Schriftdatei wird erst entdeckt, wenn der Browser das CSS gelesen und die Regel angewendet hat. Ein Hinweis im Kopfbereich bringt sie deutlich früher auf den Weg:
<link rel="preload" href="/fonts/inter-regular.woff2"
as="font" type="font/woff2" crossorigin>Das crossorigin ist auch bei Dateien vom eigenen Server nötig – Schriften werden grundsätzlich im anonymen Modus geladen, und ohne das Attribut lädt der Browser die Datei zweimal.
Laden Sie nur die eine oder zwei Dateien vor, die im ersten sichtbaren Bereich wirklich gebraucht werden. Zehn Preload-Hinweise bewirken das Gegenteil, weil sie um dieselbe Bandbreite konkurrieren.
Der Zeichenvorrat
Kostenlose Schriften decken nicht immer ab, was deutscher Text braucht. Regelmäßig fehlen:
- die typografischen Anführungszeichen „ und “
- das große Eszett ẞ
- der Gedankenstrich –
- das Eurozeichen €
Testen Sie deshalb mit einem Satz, in dem all das vorkommt, statt mit englischem Blindtext. Die Schriften-Vorschau ist genau damit vorbelegt.
Wenn ein Zeichen fehlt, greift der Browser stillschweigend auf eine andere Schrift zurück – mitten im Wort. Das fällt oft erst auf, wenn der Text gedruckt vorliegt.
Wie viel Schrift eine Seite verträgt
Eine Familie, zwei bis drei Schnitte. Das ist keine Sparsamkeit aus Prinzip, sondern eine Rechnung: Jeder Schnitt sind 20 bis 60 Kilobyte, die vor dem ersten sauberen Textaufbau da sein wollen.
Wer eine zweite Familie einsetzen will – etwa Serifen für Überschriften, serifenlos für Fließtext – sollte dafür einen Grund haben, der über Abwechslung hinausgeht. Zwei Familien bedeuten mindestens vier Dateien.
Eine ernstzunehmende Alternative ist der Verzicht auf Webfonts. Ein font-family: system-ui, sans-serif liefert auf jedem Gerät die dort optimal gerenderte Oberflächenschrift, lädt in null Sekunden und sieht besser aus, als der Ruf dieser Lösung vermuten lässt. Für eine Website, bei der Geschwindigkeit vor Markenauftritt geht, ist das die richtige Entscheidung.
Lizenzen
Die meisten frei verfügbaren Schriften stehen unter der SIL Open Font License. Sie erlaubt kommerzielle Nutzung, Veränderung und Weitergabe, verlangt aber, dass abgeleitete Schriften unter derselben Lizenz stehen und dass die Schrift nicht allein verkauft wird. Für den Einsatz auf einer Website ist damit alles abgedeckt.
Vorsicht bei Schriften von Sammelseiten mit dem Vermerk „kostenlos für private Nutzung“. Das ist eine echte Einschränkung, und eine Firmenwebsite ist keine private Nutzung. Eine Auswahl von Schriften mit unbedenklicher Lizenz steht unter Schriften.
Wie Schrift und Farbe zusammen lesbar bleiben, steht unter Farben und Kontrast im Webdesign.