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. ¹⁾

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 ²⁾  sind Font Foundries (z.B. Linotype®), Schriftportale (z.B. Google Fonts) ³⁾ oder Schriftgestalter*innen (z.B. Paul van der Laan), die diese in der Regel über das Internet als Download vertreiben.

Fonts | Tipps und Bezugsquellen weiterlesen →

Lizenzen und Kosten

Webfonts werden sowohl als kosten- und nutzungsfreie ⁴⁾ wie auch als kosten- und lizenzpflichtige Schriften vertrieben. Kosten, Umfang und Lizenzbestimmungen differieren je nach Anbieter und/oder Land, welche sich von Gratis-, Sonder-, Kombi- oder Pauschalangeboten, Abrechnung nach Pageviews bis hin zu Abonnementmodellen erstrecken. ⁵⁾

Grundsätzlich sei darauf hingewiesen, das der Markt für Computer Fonts gegenwärtig ein Oligopol ist, das von wenigen global agierende Handelsunternehmen, z.B. Google® LLC (Mountain View, USA), Adobe® Systems Inc. (San José, USA) oder die Monotype® Inc. (Woburn, USA) ⁶⁾ dominiert wird.

Kommentar »Urheberrecht für Schriften« weiterlesen →

Formate

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

Webfonts werden in unterschiedlichen Dateiformaten angeboten:

• EOT (Embedded Open Type) ⁹⁾
• OT (OpenType Format) ¹⁰⁾
• RTT (Raw TrueType)
• SVG (Scalable Vector Graphics) ^{11) 12)}
• TTF (TrueType Font)
• WOFF (Web Open Font Format 1.0) ¹³⁾
• 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 ¹⁴⁾ oder von Google Fonts ¹⁵⁾  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 »Font Hinting«. ¹⁶⁾  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« ¹⁷⁾  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«: ¹⁸⁾

@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: ¹⁹⁾

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

Ladezeiten

Da Webfonts – wie die Website selbst – von einem Server heruntergeladen werden müssen, verursachen sie zusätzlichen Datentransfer. Um die Ladezeit so kurz wie möglich zu halten, gibt es z.Zt. für Webfonts folgende Optimierungsmöglichkeiten:

1. Verwendung von Webfonts in optimierten Kompressionsverfahren, z.B. WOFF bzw. noch schneller WOFF 2.0
2. Beschränkung des Zeichenvorrats auf die in der Website maximal verwendeten Zeichen (nicht benötigte werden aus dem Zeichensatz gelöscht, z.B. mit Fontographer® von FontLAP®, FontForge® von George Williams oder einem Webfont-Generator)
3. Reduktion von Schriftarten und Schriftschnitten
4. Zeichenvorrat nach Unicode® mittels CSS (z.B. die Anwendung »unicode-range:«) ²⁰⁾  extrahieren
5. Cachen (Browser Cache) per Konfigurationsdatei ».htaccess«
6. Komprimieren (Deflate) per Konfigurationsdatei ».htaccess«

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.

Beim Fremdhosting entstehen – unabhängig davon, ob Webfonts kostenpflichtig oder kostenfrei sind – aus Sicht des Datenschutzes, z.B. im Sinne der Datenschutzgrundverordnung der EU (DSGVO), 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.

Cookies

Darüber hinaus platzieren derartig eingebundene Webfonts, Cookies in den Clients der User/Nutzer, z.B. in Internet-Browsern wie Safari®, Google Chrome® oder Firefox®. Bei derartigen Cookies handelt es sich in der Regel um kleine versteckte Datenpakete, welches zwischen Computerprogrammen ausgetauscht werden, mit denen ein Schriftanbieter, z.B. Google Fonts, den User/Benutzer einer fremden Website identifizieren, verfolgen (Profiling) und schlussendlich mit seinen anderen Daten abgleichen kann. Dies ist auch sicherlich eine Erklärung dafür, weshalb IT-Unternehmen diesen Service in der Regel kostenlos anbieten. ²¹⁾ Grundsätzlich erscheint es deshalb ratsam, Webfonts ausschließlich auf eigenen Servern zu hosten.

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 ²²⁾  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. ²³⁾  Bei der Einbindung in Websites weichen allerdings in der Webtypografie 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« ²⁴⁾  eingebunden werden.

Beispiel numerischer Codes bei Webfonts:

Font-weight	Bezeichnung	Schriftschnitt
100	Thin	Ultra leicht
200	Extra Light	Extra leicht
300	Light	Leicht
400	Normale	Normal
500	Medium	Leichthalbfett
600	Semi Bold	Halbfett
700	Bold	Fett
800	Extra Bold	Extrafett
900	Ultra Bold	Ultrafett

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