Was sind Web-Fonts?

Web-Fonts: Definition und Bedeutung

Früher konnten Websites nur Schriften nutzen, die auf jedem Rechner vorhanden waren, etwa Arial oder Times. Mit Web-Fonts lädt der Browser die Schriftdatei über die CSS-Regel @font-face vom Server. So erscheint die Markenschrift eines Unternehmens auf jedem Gerät gleich, ob Windows-PC, iPhone oder Android-Tablet. Üblich ist das komprimierte Format WOFF2, das alle aktuellen Browser unterstützen.

Schriftdateien sind Teil der Marke, aber auch Teil der Ladezeit. Jede zusätzliche Schriftfamilie und jeder weitere Schnitt wie Regular, Bold oder Italic kostet Datenvolumen und verzögert die Darstellung. Web-Fonts betreffen deshalb Gestaltung, Performance und Datenschutz zugleich, und eine schlanke Auswahl lohnt sich doppelt.

Datenschutz: Google Fonts lokal einbinden

Werden Google Fonts direkt von Google-Servern nachgeladen, wird die IP-Adresse des Besuchers an Google übertragen. Das Landgericht München I sprach einem Besucher deshalb im Januar 2022 100 Euro Schadensersatz zu (Az. 3 O 17493/20), weil er nicht eingewilligt hatte. Seitdem gilt die lokale Einbindung als sicherer Weg.

Dabei liegen die Schriftdateien auf dem eigenen Server, es fließen keine Daten an Dritte, und die Schrift lädt oft schneller, weil keine zusätzliche Verbindung nötig ist. Die Lizenz vieler Google Fonts erlaubt das, etwa die SIL Open Font License. Bei kostenpflichtigen Schriften muss die Lizenz Webnutzung und Selbsthosting abdecken. Datenschutzfragen im Einzelfall klärt Ihre Datenschutzberatung.

Praxis­bei­spiel: Zahna­rzt­praxis

Eine Zahnarztpraxis lässt ihre Website von einer Agentur erstellen. Das Theme lädt zwei Schriftfamilien mit sechs Schnitten direkt von Google. Nach der Überarbeitung wird nur noch eine Schrift mit zwei Schnitten als WOFF2 vom eigenen Server geladen, reduziert auf die benötigten Zeichen.

Die Seite lädt schneller, es gehen keine Daten an Google, und die Datenschutzerklärung wird einfacher, weil der Hinweis auf den Schriftendienst entfallen kann. Das Erscheinungsbild der Website bleibt unverändert, Patientinnen und Patienten bemerken den Unterschied nur an der kürzeren Ladezeit.

Worauf es bei der Umsetzung ankommt

Typische Fehler sind unsichtbarer Text während des Ladens, zu viele Schnitte und die Einbindung über fremde Server ohne Rechtsgrundlage. Nano Concepts bindet Schriften lokal und performant ein, passt sie an das Corporate Design an und prüft, dass Lizenz, Ladeverhalten und Datenschutzerklärung zusammenpassen. Technisch kommt es auf Folgendes an:

• WOFF2 als Format, nur benötigte Schnitte und Zeichen (Subsetting)
• font-display: swap, damit der Text sofort in einer Ersatzschrift erscheint
• Die wichtigste Schrift per preload vorladen
• Ersatzschrift mit ähnlichen Maßen, damit die Seite beim Wechsel nicht springt
• Variable Fonts prüfen: mehrere Schnitte in einer Datei
• Lizenz und Selbsthosting vorab klären