Webfonts

Bezeichnung für einen auf Hyper Text Markup Language (HTML/XHTML) basierenden Font, dessen typometrische Klassifikationsmerkmale von Webbrowsern (Softwareprogramme zur Darstellung von Webseiten, z.B. Internet Explorer®, Safari®, Google Chrome® oder Firefox®) – unabhängig vom verwendeten Betriebssystem – mehr oder weniger schriftstilnah interpretiert werden kann. 1 )

Etymologisch aus dem Englischen »Web« als Abkürzung für »World Wide Web« für »Weltweites Netz« also »Netz« und engl. »Font« für »Schrift, Zeichensatz«; Web Fonts; Netzschriften.

Webfonts sind primär für den Einsatz in (X)HTML-Webseiten bzw. für browserbasierte digitale Texte vorgesehen; sie werden in der Regel beim Aufruf einer Webseite nicht aus der lokalen Schriftensammlung (siehe Systemschriften) eines Computers (z.B. PC, Tablet, Smartphone), sondern von einem externen Webserver in den Browser (Client) eingeladen. 

Bezugsquellen

Bezugsquellen für Webfonts 2 ) sind Font Foundries (z.B. Linotype®), Schriftportale (z.B. Google Fonts) 3 ) oder Schriftgestalter (z.B. Gerard Unger), die diese online vertreiben (Auswahl siehe Font Foundry). 

Lizenzen und Kosten

Webfonts werden sowohl als kosten- und nutzungsfreie 4 ) wie auch als kosten- und lizenzpflichtige Fonts 5 ) im Internet vertrieben. Kosten und Lizenzbestimmungen differieren je nach Anbieter und/oder Land, welche sich von Gratis-, Sonder-, Kombi- oder Pauschalangeboten, Abrechnung nach Pageviews 6 ) bis hin zu Abonnementmodellen erstrecken.

Formate 

Seit der Einführung der »@font-face-Regel« ab CSS2 7 ) können rein technisch betrachtet, alle Schriften in Websites eingebettet werden 8 ) 

Webfonts werden in unterschiedlichen Dateiformaten angeboten:

  • EOT (Embedded Open Type) 9 )
  • OT (OpenType Format) 10 )
  • RTT (Raw TrueType)
  • SVG (Scalable Vector Graphics) 11 ) 12 )
  • TTF (TrueType Font)
  • WOFF (Web Open Font Format 1.0) 13 )
  • WOFF2 (Web Open Font Format 2.0) 
     

Font Konvertierung

CID-keyed OpenType PostScript® (.otf), Mac Schriftkoffer (LWFN, FFIL), Multiple Master Fonts, OpenType PostScript® (.otf), OpenType TT, PostScript® Type 1 (.pfb, .pfa, .pfm, .afm und .inf), TrueType (.ttf) und TrueType Collections (.ttc) können u.a. mittels Font Editor Software (z.B. Fontographer von FontLAP®) oder Font Converter Software (z.B. TransType von FontLAP®) zu Webfonts (EOT Embedded Open Type, WOFF Web Open Font Format und SVG Scalable Vector Graphics) umgewandelt werden. Ebenso stehen dafür sogenannte »Webfont Generatoren«, z.B. von Font Squirrel 14 ) oder von Google Fonts 15 ) im Internet kostenfrei zur Verfügung.

Font Hinting

Die Darstellungsqualität eines Webfonts in einem Browser (Client) wird weniger vom Dateiformat des Fonts bestimmt, sondern insbesondere von der Qualität des »Hinting«. 16 ) Deshalb ist die Qualität des Font Hintings ein wesentliches Kriterium bei der Wahl eines Webfonts (siehe auch Schriftwahl).

Font Kerning

Im Vergleich zu Druckschriften (PostScript® Fonts) ist das Kerning bei der Bildschirmdarstellung von Webfonts gegenwärtig noch von geringer Qualität. Ein präzises Manuelles Kerning ist nicht möglich. Grundsätzlich können jedoch die meisten modernen Internet-Browser (Clients, z.B. Safari®, Google Chrome® oder Firefox® etc.) heute Kerning- und Ligaturinformationen auswerten, wobei jeder Client diese unterschiedlich interpretiert und den Aufbau einer Website verlangsamt (siehe Kerning).

Browser

Webfonts werden seit 2015 von folgenden Browsern unterstützt:

  • Apple® Webkit/Safari® ab Version 3.1
  • Microsoft® Internet Explorer® ab Version 4
  • Google Chrome® ab Version 4.0
  • Mobile Safari® in allen Versionen (für iPhone®, iPad®, iPod®)
  • Mozilla® Firefox® ab Version 3.5
  • Opera® ab Version 10.10
     

Einbettung

Webfonts können sowohl auf eigenen wie auch auf fremden Servern (Hosting) hinterlegt werden. Das Einbinden eines Webfonts erfolgt in der Regel über die »@font-face-Regel« im »CSS Cascading Style Sheets« 17 ) einer Webseite.

Beispiel einer Webfonteinbettung über eine CSS-Datei:

@font-face {
    font-family: 'musterschrift_regular';
       src: url('musterschrift-xy.eot');
       src: url('musterschrift-xy.eot?#iefix') 
       format('embedded-opentype'),
       url('musterschrift-xy.woff') 
       format('woff'),
       url('musterschrift-xy.ttf') 
       format('truetype');
    font-weight: normal;
    font-style: normal; 
}

Beispiel eines CSS-Snippets der »Fira Sans regular« von Google Fonts für die Formate .eot, .woff, .woff2, .ttf und .svg: 18 )

@font-face {
   font-family: 'Fira Sans';
   font-style: normal;
   font-weight: 400;
     src: url('../fonts/fira-sans-v7-latin-regular.eot');
     src: local('Fira Sans Regular'), local('FiraSans-Regular'),
          url('../fonts/fira-sans-v7-latin-regular.eot?#iefix') 
          format('embedded-opentype'),
          url('../fonts/fira-sans-v7-latin-regular.woff2')  
          format('woff2'),
          url('../fonts/fira-sans-v7-latin-regular.woff') 
          format('woff'), 
          url('../fonts/fira-sans-v7-latin-regular.ttf') 
          format('truetype'),
          url('../fonts/fira-sans-v7-latin-regular.svg#FiraSans') 
          format('svg');
}

Des Weiteren können Webfonts auch über Javascript®, ein API Application Programming Interface (Schnittstelle zur Anwendungsprogrammierung), bei WordPress® über einen Link in der »header.php« bzw. »functions.php« oder mit speziellen Softwareplugins eingebunden werden.

Webfonts sollten grundsätzlich mit websicheren Fallback Fonts (siehe Systemschriften) abgesichert werden, falls diese durch eine Firewall geblockt werden oder der Server eines Fremdhosters ausfällt. 

Beispiel einer Fallback Font Anwendung in einem CSS: 19 ) 

p {
    font-family: 'Fira Sans', Helvetica, Verdana, sans-serif;
}

Fremdhosting

Datenschutz

Webfonts können sowohl auf dem eigenen Server hinterlegt, wie auch über Server von Webfont Hosting Providern, z.B. Google® Fonts, Adobe® Edge Web Fonts bzw. Adobe Typekit oder Monotype®, abonniert werden.

Die Infografik veranschaulicht den Abruf eines Fonts beim Abruf einer Website mittels eines Internet Browsers (z.B. Safari®, Chrome® oder Firefox®). Links: Verwendung einer Systemschrift in einer Webanwendung. Die Schrift wird direkt vom PC des Users geladen. Mitte: Fremdhosting eines Webfonts, z.B. durch das Abonnieren eines Google Fonts. Der Font wird von einem fremden Server – z.B. einer Cloud in den USA – beim Aufruf der Website eingelesen. Rechts: Der Webfont wird auf dem eigenen Server als Font File hinterlegt und lädt zusammen mit der Website.
Die Infografik veranschaulicht den Abruf eines Fonts beim Abruf einer Website mittels eines Internet Browsers (z.B. Safari®, Chrome® oder Firefox®). Links: Verwendung einer Systemschrift in einer Webanwendung. Die Schrift wird direkt vom PC des Users geladen. Mitte: Fremdhosting eines Webfonts, z.B. durch das Abonnieren eines Google Fonts. Der Font wird von einem fremden Server – z.B. einer Cloud in den USA – beim Aufruf der Website eingelesen. Rechts: Der Webfont wird auf dem eigenen Server als Font File hinterlegt und lädt zusammen mit der Website.

Beim Fremdhosting entstehen – unabhängig davon, ob Webfonts kostenpflichtig oder kostenfrei sind – aus Sicht des Datenschutzes signifikante Probleme, da alle Websites einer Homepage durch das Abonnieren eines Webfonts mit einer Programmierschnittstelle (API – Application Programming Interface) – z.B. mit einem Server von Adobe® oder Google® in den USA – dauerhaft verbunden werden. Der Hosting Provider des Webfonts ist dadurch in der Lage, alle Aktivitäten einer Website detailliert aufzuzeichnen und allumfassend zu analysieren.

Firewall

Das Tracking (Spurbildung) durch Webfont Hosting Provider kann verhindern, dass Webfonts nicht durch die Firewall (Sicherungssystem) eines Rechnernetzwerkes gelassen werden. Der User sieht dann den Webfont nicht, sondern nur eine Systemschrift seines PCs (Fallback Font) bzw. bei sensiblen Firewalls wird die gesamte Homepage blockiert. 

SEO Search Engine Optimization

Da beim Abonnieren die Webfonts von einem Fremdserver geladen werden, kann dies die Ladezeit (Pagespeed) der eigenen Homepage deutlich verringern, was sich auch auf das Ranking in Suchmaschinen auswirken kann. 

Verfügbarkeit

Probleme bei der Hochverfügbarkeit, der Servergeschwindigkeit und den Serverausfallzeiten sowie ggf. die Liquidation von Webfont Hosting Providern 20 ) gelten als weitere Argumente, Webfonts bestenfalls auf dem eigenen Server zu hinterlegen. 

Schriftschnitte

Webfonts gibt es sowohl als einzelne Schriftschnitte wie auch als komplette Schriftfamilien. 21 ) Bei der Einbindung in Websites weichen allerdings in der Webtypographie oft gängige Termini von denen der klassischen Schriftklassifikation ab. Beispielsweise können einzelne Schriftschnitte mit numerischen Codes aus der digitalen Schriftgestaltung (z.B. font-weight: 400; = normal/regular/roman) in ein »CSS Cascading Style Sheets« 22 ) eingebunden werden.

Beispiel numerischer Codes bei Webfonts:

Font-weightBezeichnungSchriftschnitt
100ThinUltra leicht
200Extra LightExtra leicht
300LightLeicht
400NormaleNormal
500MediumLeichthalbfett
600Semi BoldHalbfett
700BoldFett
800Extra BoldExtrafett
900Ultra BoldUltrafett

 

Druck

Webfonts sind keine PostScript®-Schriften. D.h., sie sind nicht für die professionelle Druckvorstufe (z.B. im Offsetdruck) geeignet. Selbst bei Ausdrucken auf simplen Bürodruckern (z.B. Laserdrucker) kann es zu markanten Abweichungen vom Originalschriftbild kommen. 

© Wolfgang Beinert, www.typolexikon.de

Share / Beitrag teilen:

Quellen / Literatur / Anmerkungen / Informationen / Tipps:   [ + ]

1.Anmerkung: Die Darstellung eines Webfonts auf unterschiedlichen PCs und unterschiedlichen Ausgabegeräten weicht in der Regel grundlegend je nach verwendeter Hardware, Betriebssystem, Browser, Browserversion, Grundeinstellungen des Browsers, Bildschirmqualität, Bildschirmauflösung, Anti-Aliasing, Grafikkarte, etc. spürbar voneinander ab. Von einer einheitlichen Darstellung im Sinne der Mikrotypographie kann zurzeit noch nicht gesprochen werden.
2.Anmerkung: Mehrheitlich werden sogenannte »Webfonts« zur Nutzung angeboten, die leider nichts anderes als Druckschriften und eben keine im Sinne der Lesetypographie für den Bildschirm entwickelten Screen Fonts sind. Viele Font Foundries versuchen so, ihren digital vorhandenen Druckschriftenbestand bestenfalls als »optimierte« Webfonts zu verkaufen.
3.Anmerkung: Unter https://fonts.google.com und https://google-webfonts-helper.herokuapp.com/fonts lassen sich Google Fonts (.ttf) und Google Webfonts (z.B. .woff) kostenfrei herunterladen.
4.Anmerkung: Im Internet gibt es viele lizenzfreie Angebote, beispielsweise Google Fonts (https://fonts.google.com) mit derzeit rund 650 Webfonts oder Font Squirrel (www.fontsquirrel.com). Diese Fonts sind gestalterisch nicht unbedingt schlechter oder besser als lizenzgebundene Schriften.
5.Hinweis: Urheberrecht für Schriften und Mythos »Schriftsoftware«. Eine kritische Anmerkung von Wolfgang Beinert.
6.Anmerkung: Die Pageviews (Seitenzugriffe) werden in der Regel mittels Tracking gezählt. D.h., der Schriftverkäufer hat somit immer Zugriff auf Ihre vertraulichen Webanalysedaten.
7, 17, 22.Anmerkung: CSS Cascading Style Sheets ist ein weltweiter Standard des W3C (World Wide Web Consortium).
8.Anmerkung: Webfonts sind Vektorgrafiken, die vom jeweiligen Client in eine Pixelmatrix umgewandelt werden, um so den Font in einem Webbrowser darstellen zu können. Generell ist also nicht das Schriftformat, wie TrueType (TTF), OpenType (OT), SVG oder PostScript® ausschlaggebend, sondern das Hinting, welches die Darstellungsqualität der Schrift im Browser optimiert.
9.Anmerkung: Das EOT-Format braucht man eigentlich nur noch, wenn man den Internet Explorer vor Version 9 unterstützen möchte.
10.Anmerkung: Fast alle Browser unterstützen heute OpenType. Somit können auch OT-Features wie Ligaturen oder Sonderzeichen per CSS-Befehl implementiert werden.
11.Anmerkung: SVG Scalable Vector Graphics (Skalierbare Vektorgrafik) ist die vom World Wide Web Consortium (W3C) empfohlene Spezifikation zur Beschreibung zweidimensionaler Vektorgrafiken. Auf XML basierende SVGs wurden erstmals Ende 2001 veröffentlicht.
12.Anmerkung: OpenType-SVG Fonts (Color Fonts) werden zur Zeit noch nicht von allen Webbrowsern unterstützt. Die Ladezeiten bei OpenType-SVG Fonts sind deutlich höher als bei WOFF oder WOFF2.
13.Anmerkung: Zur Sicherung von Lizenzrechten der im Internet genutzten Schriften wurde 2009 das Web Open Font Format (WOFF) geschaffen. Es unterscheidet sich nur gering von einem Open Type File. Eine WOFF-Datei ist nichts anderes als ein ZIP-Archiv, das XML-Metainformationen über Lizenz und Hersteller sowie den RawFont enthält. Entwickelt wurde dieses Format von Erik van Blokland, Tal Leming und Jonathan Kew. WOFF gilt als offizieller W3C-Standard, der zurzeit vom neuen Kompressionsverfahren »Brotli« (WOFF 2.0) ersetzt werden wird. Der »Brotli«-Algorithmus wurde von Google® entwickelt und verspricht eine Größenreduzierung der Schriftdateien von bis zu 50 Prozent gegenüber WOFF 1.0.
14.Quelle: Web Generator online unter https://www.fontsquirrel.com/tools/webfont-generator (17.3.2017).
15.Quelle: Online verfgügbar unter https://google-webfonts-helper.herokuapp.com/fonts (17.3.2017).
16.Anmerkung: Bei vielen kostenlosen Webfonts wird meist auf das Hinting verzichtet, was die Buchstaben unscharf erscheinen lässt.
18.Quelle: Originalcode bei Google Webfonts Helper, online unter https://google-webfonts-helper.herokuapp.com/fonts/fira-sans?subsets=latin (17.3.2017).
19.Anmerkung: CSS Cascading Style Sheets ist ein weltweiter Standard des W3C (World Wide Web Consortium). Informationen verfügbar unter http://www.w3c.de/about/ (21.4.2017).
20.Anmerkung: Beispielsweise stellte der Webfont Hosting Provider WebINK ab Juni 2015 seinen Dienst ein. Er verursachte dadurch erhebliche Kosten bei Agenturen und Unternehmen. Quelle: Pressemitteilung Dr. Web: Webfonts adé: Typekit-Konkurrent WebINK gibt auf, 17.2.2015.
21.Anmerkung: Der Zeichenvorrat eines Webfonts kann merklich von dem einer gleichnamigen Druckschrift abweichen. Insbesondere kostenlose oder von Amateuren gefertigte Webfonts weisen hier markante Defizite auf.