Marketing Glossar

2.413 Fachbegriffe aus 22 Bereichen des Online Marketings

Schriftarten & Webfonts

Definition: Webfonts (auch: Web-Schriftarten; @font-face-Schriften) sind Schriftarten die über das @font-face-CSS-Feature in Webseiten eingebunden werden und Browsern ermöglichen individuelle Typografie-Designs zu rendern die über die auf dem Nutzersystem vorinstallierten Systemschriften (Arial, Times New Roman, Georgia, Verdana) hinausgehen. Webfont-Formate: WOFF2 (Web Open Font Format 2; entwickelt von Raph Levien und Google 2012; W3C Recommendation 2018; beste Kompressionsrate; 30% kleiner als WOFF; Standard-Format für moderne Browser); WOFF (Web Open Font Format; Mozilla Foundation; 2009; Vorgänger; weitgehend durch WOFF2 ersetzt; nur noch für IE11-Kompatibilität relevant); TTF/OTF (TrueType/OpenType; ältere Desktop-Font-Formate; größer als WOFF2; in Webanwendungen vermieden). Webfont-Quellen: Google Fonts (Google LLC; 2010; San Francisco; CA; kostenlos; Open-Source-Lizenzen; 1500+ Schriftfamilien; cdn.fonts.googleapis.com; DSGVO-Problem: IP-Übermittlung an US-Server); Adobe Fonts (früher Typekit; Seattle; WA; 2008; von Adobe erworben 2011; 20.000+ Schriften; im Creative-Cloud-Abo enthalten); Fonts.com (Monotype; Woburn; MA; kommerzielle Lizenzen; Enterprise-Fokus); Fontstand (Bratislava; Slowakei; 2014; Monatsmiet-Modell; kaufbare Jahreslizenzen); Variable Fonts (W3C CSS Font Level 4; 2016; alle Schriftschnitte – Regular/Bold/Italic/Light – in einer einzigen Font-Datei; Gewicht stufenlos einstellbar; kleinere Gesamtdateigröße als mehrere statische Schnitte); Selbst-gehostete Systemschriften-Alternativen: font-family: system-ui, -apple-system, BlinkMacSystemFont – keine Ladezeit da auf System vorhanden.

Erläuterung

Die Geschichte der Web-Typografie beginnt mit einer fundamentalen Einschränkung: das frühe World Wide Web (Tim Berners-Lee; CERN; Genf; Schweiz; 1991) konnte nur Schriften rendern die auf dem Client-Betriebssystem installiert waren; Webdesigner waren auf «Web-safe fonts» beschränkt: Arial, Helvetica, Times New Roman, Georgia, Verdana, Courier New, Trebuchet MS – alle auf Windows und Mac vorinstalliert. Håkon Wium Lie (Opera Software; Oslo; Norwegen; CSS-Miterfinder) und Bert Bos schrieben @font-face in die CSS2-Spezifikation (W3C CSS Working Group; 1998); Microsoft Internet Explorer 4 (1997) implementierte @font-face mit proprietärem EOT-Format (Embedded OpenType); die Technik blieb jedoch weitgehend ungenutzt da Firefox, Safari und Chrome keine Unterstützung hatten. Jeffrey Zeldman (A List Apart; New York; «Designing with Web Standards», New Riders, 2003; 3. Auflage 2009) und Ethan Marcotte (Boston; MA) trieben Web-Standards-Adoption voran und dokumentierten die Typografie-Einschränkungen als kritische Kreativitätshürde. Font-Replacement-Techniken wie sIFR (Mike Davidson; Newsweek; 2004; Flash-basierter Schrift-Ersatz) und Cufón (JavaScript-basiert; 2008) überbrückten die Lücke bis zu echter @font-face-Unterstützung. Small Screens, die Service Typekit (früher Typekit; Berkeley; CA; 2008; Jeffrey Veen und Ryan Carver; von Adobe 2011 für 10-20M USD erworben) löste das Lizenzierungsproblem: Schriftanbieter hatten @font-face blockiert da Desktop-Font-Lizenzen keine Web-Nutzung erlaubten; Typekit schuf ein Lizenz-Framework das Schriftanbieter überzeugte ihre Schriften für Web-Einbindung freizugeben. Google Fonts (Google; 2010; Simon Iurato und Bruno Bergher als erste Team-Leads) demokratisierte Webfonts durch kostenlosen Open-Source-Zugang: die erste Version 2010 enthielt nur 18 Schriften; heute über 1.500 Schriftfamilien; Google Fonts ist der meistgenutzte Webfont-Dienst weltweit mit über 50 Milliarden täglichen Font-Auslieferungen (Google Stand 2022). Raph Levien (Google; San Francisco; CA; Schrift-Forscher; XML-Entwickler; «An Improved Algorithm for Anti-Aliasing»; entwickelte WOFF2-Format 2012 gemeinsam mit dem Google-Fonts-Team) entwickelte WOFF2 als Nachfolger von WOFF: Brotli-Komprimierung (statt zlib in WOFF) erzeugt 30% kleinere Dateien; W3C Recommendation März 2018; vollständige Browser-Unterstützung seit 2015. Variable Fonts (W3C OpenType Specification; Erweiterung von OpenType 1.8; Apple/Google/Microsoft/Adobe; September 2016): ein Single-Font-Datei enthält eine kontinuierliche Achse von Schrift-Variationen (weight axis: 100–900; width axis: condensed–expanded; italic axis; slant axis; custom axes); CSS font-variation-settings und font-weight: 350 (Nicht-Standard-Wert) möglich; Nick Sherman (Typeface-Journalist; typographica.org) dokumentierte Variable Fonts als «the most significant advancement in font technology since OpenType»; DSGVO-Implikation: Mit Urteil des LG München I (20 Januar 2022; Az. 3 O 17493/20) wurde die Einbindung von Google Fonts über CDN ohne explizite Nutzer-Einwilligung als DSGVO-Verstoß eingestuft da IP-Adressen an US-Server übermittelt werden; Self-Hosting wurde zur DSGVO-konformen Pflicht für deutsche Websites.

@font-face, WOFF2 und font-display

Schriftklassen, Typografie-Systematik und Font-Paarungen

Praxistipp: Laden Sie für jede Schriftfamilie nur die Gewichte die Sie tatsächlich verwenden – jedes zusätzliche Schriftgewicht ist eine separate Netzwerk-Anfrage und 20–100KB zusätzliche Datei. Wenn Sie Google Fonts nutzen wollen ohne DSGVO-Probleme: hosten Sie die Schriften selbst via google-webfonts-helper.herokuapp.com das optimierte WOFF2-Dateien und fertigen CSS-Code generiert. Und: Setzen Sie immer font-display: swap damit Nutzer sofort Text sehen (in einer Systemschrift) statt auf eine leere Seite zu warten bis die Schrift geladen ist.