Webfonts sind digitale Schriftdateien, die technisch und/oder lizenzrechtlich für den Einsatz auf Websites vorgesehen sind und/oder auf diese Weise eingesetzt werden. Der Begriff wurde ab 2008 in Abgrenzung zu Desktop-Fonts etabliert, welche zur lokalen Installation bestimmt sind und für Gestaltungsarbeiten wie Logos, Drucksachen usw. zum Einsatz kommen.
Webfonts werden zur Darstellung einer Website vom Browser aus dem Internet heruntergeladen und in Echtzeit gerendert, so als wären sie lokal installiert. Auf diese Weise lassen sich Texte auf Websites in beliebigen Schriftarten darstellen.
In technischer Hinsicht unterstützen heutige Webbrowser in der Regel die gängigen Fontformate wie TrueType (.TTF) oder TrueType- oder PostScript-basiertes OpenType (.TTF/.OTF). Auf Druck und Initiative der Anbieter kommerzieller Schriften wurde jedoch daneben mit WOFF (Web Open Font Format) eigenes Webfont-Format etabliert. Dieses ist ausschließlich für den Webfont-Einsatz bestimmt. Die direkte lokale Installation als Desktop-Font ist technisch in der Regel nicht möglich. So können kommerzielle Schriften gezielter für die jeweils erworbene Lizenz verteilt werden. Außerdem sind WOFF-Schriften im Gegensatz zu TrueType-Desktop-Schriften komprimiert.
Für die Einbindung von Webfonts in Websites gibt es zwei Grundprinzipien:
1. Self-Hosting
Der Font wird zusammen mit der Website und den restlichen Ressourcen (wie Bilder, Videos etc.) direkt auf dem Webserver abgelegt. Der Webfont-Nutzer behält somit die volle Kontrolle über die Webfonts, ist aber auch für deren Pflege verantwortlich. Beispielcode (CSS) der Einbindung:
@font-face { font-family: 'krimhilde_a'; src: url('krimhildea-bold-webfont.woff2') format('woff2'), url('krimhildea-bold-webfont.woff') format('woff'); font-weight: bold; font-style: normal; }
2. Webfont-Service
Alternativ zum Self-Hosting können Webfonts auch von externen Anbietern eingebunden werden, z.B. von Google Fonts (kostenlos) oder Adobe Fonts (kommerziell). Der externe Dienst generiert dann den nötigen CSS-Code und stellt die Webfonts in den passenden Formaten zur Verfügung. Auch die Überprüfung einer gültigen Lizenz für die aufrufende Website ist durch den Dienst möglich. Beispielcode für die Einbindung über Google Fonts (im Kopfbereich einer HTML-Seite):
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">
Der Funktionsumfang von Webfonts kann reduziert sein. So kann etwa der Zeichenumfang beschränkt werden (»Subsetting«) oder OpenType-Funktionen können zur Verkürzung der Ladezeiten entfernt werden. Diese Änderungen sind jedoch optional. Desktop-Fonts und Webfonts können auch den gleichen Funktionsumfang haben oder sogar die gleiche Datei sein.
Siehe auch:
