Was sind Webfonts und warum solltest du sie nutzen?
Ein Webfont ist eine Schriftdatei, die deine Website an den Browser des Besuchers schickt. So sieht dein Text genau so aus, wie du ihn gestaltet hast, auch wenn der Besucher diese Schrift nie installiert hat.
So funktionieren Webfonts
Wenn jemand deine Seite öffnet, liest der Browser dein CSS, erkennt, welche Schrift benötigt wird, und lädt die Datei von deinem Server herunter. Danach stellt er deinen Text mit dieser Schrift dar. All das passiert automatisch, und der Besucher muss nichts installieren.
Webfonts oder Systemschriften?
Systemschriften sind bereits auf dem Gerät des Besuchers vorhanden, zum Beispiel Arial, Georgia oder San Francisco. Sie müssen nicht heruntergeladen werden und sind deshalb die schnellste Option. Der Nachteil: Das Erscheinungsbild wechselt von Gerät zu Gerät, und nur wenige passen zu deiner Marke.
- Wähle einen Webfont, wenn deine Marke, Überschriften oder dein Design auf einer bestimmten Schrift basieren.
- Wähle Systemschriften, wenn Geschwindigkeit am wichtigsten ist, etwa in Dashboards oder internen Tools.
- Kombiniere beides, indem du für Überschriften einen Webfont und für Fließtext eine Systemschrift verwendest.
Was kosten Webfonts an Geschwindigkeit?
Jede Schriftdatei ist ein weiterer Download, und Text kann verspätet erscheinen oder springen, während die Datei ankommt. Ein gut vorbereiteter Webfont hält diesen Aufwand klein. Verwende WOFF2, entferne Zeichen, die du nicht brauchst, und lade nur die Schriftschnitte, die du tatsächlich nutzt. Unser Leitfaden zu schnelleren Webfonts erklärt jeden Schritt.
Selbst hosten oder ein Font-Dienst?
Dienste wie Google Fonts und Adobe Fonts hosten die Dateien für dich. Selbst hosten bedeutet, sie auf deinem eigenen Server abzulegen. So behältst du die Kontrolle über Caching und Geschwindigkeit, und die Browser der Besucher kontaktieren keinen Drittanbieter. Das kann für den Datenschutz wichtig sein: 2022 entschied ein deutsches Gericht gegen eine Website, die Google Fonts ohne Einwilligung von Google-Servern lud.
Bevor du selbst hostest, lies die Lizenz der Schrift. Unser Leitfaden zur Webfont-Lizenzierung erklärt, worauf du achten solltest.
Der Einstieg
Nimm eine Schrift, für die du eine Nutzungslizenz hast, und verarbeite sie mit dem Webfont Generator. Du erhältst webfertige Dateien und CSS, und unser Leitfaden zeigt dir, wie du sie in deine Seite einbindest.
