Webfonts: Einbindung, Performance, Lizenzen

Webfonts sind Schriftdateien, die von einem Webserver geladen und im Browser angezeigt werden, um individuelle Typografie unabhängig von den auf dem Nutzergerät installierten Systemschriften zu ermöglichen.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Web-Grundlagen · Niveau: Einsteiger Synonyme / Auch bekannt als: Web-Schriften, Custom Fonts, @font-face, Online-Schriften

Was sind Webfonts?

Schriften im Web waren lange ein Problem: Ohne installierte Schrift auf dem Nutzergerät konnte ein Designer keine besonderen Fonts zeigen – Websiten beschränkten sich auf Systemschriften wie Arial, Georgia oder Times New Roman.

Mit Webfonts änderte sich das grundlegend. Heute können beliebige Schriften direkt im Browser geladen werden, entweder von einem eigenen Server oder von Diensten wie Google Fonts, Adobe Fonts oder Fontshare. Das ermöglicht eine konsistente Markentypografie auf allen Geräten.

Für Designer ist dabei nicht nur die ästhetische Dimension wichtig, sondern auch: Welche Dateiformate werden benötigt? Wie beeinflusst der Font die Ladezeit? Und welche Lizenz ist notwendig?

Erklärung

Dateiformate

Moderne Webfonts werden im WOFF2-Format (Web Open Font Format 2.0) eingebunden. WOFF2 bietet die beste Kompression (ca. 30 % kleiner als WOFF) und wird von allen modernen Browsern unterstützt. Für Legacy-Unterstützung (ältere Browser) kann zusätzlich WOFF bereitgestellt werden.

Ältere Formate wie EOT (Internet Explorer), TTF und SVG sind für Neuprojekte nicht mehr relevant.

Einbindungswege

1. Google Fonts (einfachste Methode) Google Fonts ist der meistgenutzte Webfont-Dienst – kostenlos, große Auswahl, einfache Integration über einen HTML-Link. Datenschutzrechtlich ist zu beachten, dass beim Laden einer Google-Font-Einbindung IP-Adressen an Google-Server übertragen werden. In Deutschland ist dafür eine entsprechende Datenschutzhinweisseite notwendig; viele Agenturen hosten Google Fonts lokal (Self-Hosting).

2. Adobe Fonts Mit einer Creative-Cloud-Lizenz verfügbar. Hohe Qualität, gute Lizenzierung für Web und Desktop. Einbindung über JavaScript-Snippet.

3. Self-Hosting Die Schriftdateien werden auf dem eigenen Server abgelegt. Mehr Kontrolle über Datenschutz und Ladezeit, aber manueller Aufwand. Tools wie „google-webfonts-helper" ermöglichen den einfachen Download von Google-Fonts-Dateien zur lokalen Einbindung.

4. Variable Fonts Variable Fonts sind ein neueres Format, bei dem eine einzige Schriftdatei mehrere Schnitte (Gewicht, Breite, Schrägung) enthält. Statt fünf separate Dateien für Light, Regular, Medium, Bold und ExtraBold zu laden, reicht eine Variable-Font-Datei. Das spart erheblich Ladezeit.

Performance-Optimierung

Webfonts sind eine häufige Ursache für langsames Page-Rendering. Wichtige Optimierungen:

• Nur benötigte Schnitte laden: Viele Projekte laden alle Schriftschnitte einer Familie, obwohl nur Regular und Bold gebraucht werden. Jeder überflüssige Schnitt kostet Ladezeit.
• Zeichensatz-Subsetting: Für deutschsprachige Websites genügt der Lateinische-Zeichensatz plus Umlaute. Das reduizert die Dateigröße gegenüber einem vollständigen Unicode-Font deutlich.
• `font-display: swap`: Diese CSS-Direktive sorgt dafür, dass der Browser zunächst eine Systemschrift anzeigt und auf den Webfont wechselt, sobald er geladen ist. Das verhindert den FOIT (Flash of Invisible Text), bei dem Text für Millisekunden unsichtbar ist.
• Preload: Kritische Schriften können mit einem <link rel="preload"> Tag früh im HTML-Ladeprozess priorisiert werden.

Page Speed und Core Web Vitals: Was Designer wissen müssen beschreibt, wie Fonts die Core Web Vitals beeinflussen.

Variable Fonts im Detail

Variable Fonts (OpenType Font Variations) ermöglichen eine kontinuierliche Variation entlang definierbarer Achsen. Die häufigsten Achsen:

• wght (Weight): Schriftstärke von z. B. 100 bis 900
• wdth (Width): Schriftbreite (Condensed bis Extended)
• ital (Italic): Kursivgrad
• opsz (Optical Size): Anpassung für verschiedene Schriftgrößen

Für Responsive Design: Grundlagen und Breakpoints sind Variable Fonts besonders interessant: Schriftgewicht kann stufenlos angepasst werden, zum Beispiel leicht schwerer auf kleinen Bildschirmen für bessere Lesbarkeit.

Beispiele

Google Fonts – Inter: Inter ist eine der beliebtesten Interface-Schriften, kostenlos, als Variable Font verfügbar und mit hervorragender Lesbarkeit auf Bildschirmen optimiert.

Adobe Fonts – Neue Haas Grotesk: Eine professionelle Groteskschrift, die über Adobe Fonts in Websites eingebunden werden kann und für hochwertige Corporate Websites genutzt wird.

System Font Stack: Wer maximal schnell bleiben will, nutzt Systemschriften: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif. Kein Webfont-Ladevorgang, sofortige Darstellung.

In der Praxis

Schriftauswahl im Design-Prozess

In Figma werden Schriften aus der lokal installierten Bibliothek oder über das Figma Font-Plugin eingebunden. Beim Handoff an Entwickler: Figma, Zeplin, Storybook ist wichtig zu dokumentieren:

• Welche Schriftfamilie und welcher Dienst (Google, Adobe, Self-Hosted)?
• Welche Schnitte werden verwendet?
• Welche Fallback-Schriften sollen gelten?

Lizenzierung

Nicht jede Schrift, die für Print-Medien lizenziert ist, darf auch auf Websites eingesetzt werden. Schriftlizenzen unterscheiden zwischen:

• Desktop-Lizenz: Nutzung in Design-Programmen und Print
• Webfont-Lizenz: Einbindung auf Websites, oft nach Page Impressions abgerechnet
• App-Lizenz: Nutzung in mobilen Anwendungen
• Variable Font Lizenz: Manchmal gesondert

Google Fonts sind unter der Open Font License (OFL) oder Apache-Lizenz frei nutzbar – auch kommerziell, auf Websites und in Apps.

Bei kommerziellen Schriften (z. B. von MyFonts, Fonts.com, Klim Type Foundry) muss die korrekte Lizenz aktiv erworben werden. Design Systems: Von Figma zu Code empfiehlt, Schriftlizenzen im Design System zu dokumentieren.

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Wie viele Webfonts sind zu viele? Als Faustregel: nicht mehr als zwei Schriftfamilien pro Website. Jede zusätzliche Familie erhöht die Ladezeit. Wenn eine Marke mehrere Schriften verwendet, sollten diese möglichst als Variable Fonts oder aus einem einzigen Dienst kommen.

Was ist FOUT und FOIT? FOUT (Flash of Unstyled Text): Browser zeigt kurz Fallback-Schrift, dann wechselt er zur Webfont. FOIT (Flash of Invisible Text): Text ist unsichtbar, bis die Webfont geladen ist. font-display: swap verhindert FOIT zugunsten von FOUT.

Darf ich Google Fonts auf meiner Website nutzen? Technisch und lizenzrechtlich ja. Datenschutzrechtlich (DSGVO) bei externer Einbindung nur mit Einwilligung oder lokaler Einbindung empfohlen.

Verwandte Einträge

• Responsive Design: Grundlagen und Breakpoints – Typografie responsive anpassen
• Page Speed und Core Web Vitals: Was Designer wissen müssen – Einfluss von Webfonts auf Ladezeiten
• Barrierefreiheit im Web (WCAG 2.2) für Designer – Schrift und Kontraste für Barrierefreiheit
• Design Systems: Von Figma zu Code – Schriften im Design System dokumentieren
• Handoff an Entwickler: Figma, Zeplin, Storybook – Schrift-Spezifikationen übergeben
• Dark Mode Design: Farben und Kontraste – Schrift-Rendering im Dark Mode

Weiterführend

• Coyier, C. (2023). Getting started with Variable Fonts. CSS-Tricks.
• Google Fonts Knowledge (2024). Implementing web fonts.
• Rutter, R. (2017). Web Typography. Five Simple Steps.
• Zeldman, J. & Marcotte, E. (2020). Taking Your Talent to the Web: Fonts. A List Apart.
• Underware (2022). Variable Fonts.