Ob mit Serifen, rund oder gebrochen, mit Webfonts kannst du deiner Webseite einen speziellen Anstrich verschaffen. Das gilt besonders für mobile Webseiten. Da werden oftmals Bilder und grafische Elemente prozentual verkleinert. Die Schrift aber bleibt immer omnipräsent. Die Einbindung von unterschiedlichen Webfonts in Webseiten ist mittlerweile kein Problem. Auch gibt es für fast alle Schriftschnitte eine entsprechende Variante für das Web. Trotzdem gibt es, gerade bei der Lizenzierung, einige Punkte zu beachten. Mehr dazu in diesem cmsblox Beitrag.
Funktionsweise
Grundsätzliches
In den Anfängen des www haben die Browser die Schriften vom Computer des Webseitenbesuchers geladen und auf der Webseite angezeigt. Darum gab es nur eine sehr begrenzte Anzahl von Schriften, nämlich diejenigen, welche alle Benutzer auf ihrem System hatten. Grundsätzlich muss eine Schrift auch heute immer noch vom Browser geladen werden. Allerdings nicht mehr vom Endgerät des Benutzers, sondern von unseren (oder externen) Servern. Das bedeutet auch, dass Schriften sparsam eingesetzt werden sollten, da sie immer geladen werden müssen. Egal wie viele andere Inhalte sonst noch auf der Webseite sind und damit geladen werden müssen.
Font stack
Falls eine Webfont aus Gründen nicht geladen werden kann, werden als Backup mehrere andere Schriften hinterlegt, das sogenannte font stack. Du musst uns aber nur deine gewünschte Schrift angeben, die Backups hinterlegen wir. Als absoluter Notfall ist dies übrigens immer noch eine der Standardschriften vom Endgerät des Benutzers.
Rendering
Vielleicht ist es euch schon aufgefallen, Webfonts werden, egal auf welchem Bildschirm, immer sehr scharf angezeigt. Das kommt daher, dass die Browser Webfonts als Vektor laden und dann in eine Pixelmatrix rendern. Dies geschieht bei modernen Browsern mittels Subpixel-Rendering. Diese Rendering-Methode führt auch bei hochaufgelösten Bildschirmen zu einer sehr scharfen Darstellung. Jedoch ist die Rendering-Methode der Browser unterschiedlich. Das kann dazu führen, dass Webfonts auf unterschiedlichen Browsern anders aussehen.
Cross-Browser-Fähigkeiten
Die gängigsten Formate für Webfonts sind:
EOT
TTF/OFT
WOFF und WOFF2
Grundsätzlich hat sich WOFF als Standard etabliert. WOFF2 ist der Nachfolger von WOFF und verwendet ein effizienteres Kompressionsverfahren und wird darum schneller geladen. Das verwendete Verfahren heisst übrigens Brotli und ist der Nachfolger von Zopfli (???). Item, mit WOFF und WOFF2 werden alle moderneren und relevanten Browser unterstützt. Dieses Format wird auch bei allen Webfontsanbietern mitgeliefert. Falls eine Webseite noch den Internet Explorer 9 unterstützen soll, muss die Schrift zusätzlich im EOT Format hinterlegt werden. Wenn dies also auf eine eurer Webseiten zutreffen sollte, muss bei der Auswahl der Font darauf geachtet werden, dass das Schrift-Paket ein EOT Format beinhaltet.
Bild Von Brian Ammon, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=2349540
Lizenzierung
Es gibt verschiedene Anbieter, welche Webfonts anbieten. Die Bandbreite ist riesig und führt von kleinen Schriftenherstellern, welche ihre eigenen Schriften anbieten, bis hin zu den grossen Anbietern wie Adobe Fonts und Monotype (fonts.com). Alle bieten unterschiedliche Lizenzierungsmöglichkeiten an. Wir schauen uns einige Anbieter genauer an:
Adobe Fonts
In jedem Creative Cloud Abo sind die Lizenzen für tausende Schriten von Adobe Fonts inklusive. Die Schriften lassen sich sehr einfach in die gesamte Palette der Adobe Programme einbinden. Doch es gibt einen Hacken. Die Lizenz der verwendeten Webfonts lautet nur auf den Besitzer des Creative Cloud Abo. Ihr könnt also im Designprozess die Fonts von Adobe nutzen. Wenn die Webseite aber online geht, muss die Lizenz dem Webseitenbesitzer, also unserem gemeinsamen Kunden, gehören. Um alle Schriften zu nutzen, braucht der Kunde ein Creative Cloud Abo (das günstigste ist das Abo für InCopy für CHF 5.40 pro Monat Stand 2021). Oder aber der Kunde registriert sich bei Adobe Fonts gratis. Dann ist die Lizenz für rund 320 Schriftfamilien inklusive. Welche Schriften in dieser Lizenz enthalten sind findet man heraus, wenn ein Gratis Adobe Fonts Konto hat. Direkt aus dem Creative Abo ist nicht ersichtlich, welche Lizenzoptionen eine Schrift hat. Dies ist dann doch etwas mühsam. Darum empfehlen wir, keine Webfonts von Adobe Fonts zu verwenden. Oder den Webseitenbesitzer schon früh über die monatlichen Kosten zu informieren.
Monotype (monotypefonts.com, myfonts.com, etc.)
Monotype unterhaltet unterschiedliche Plattformen wo Schriften lizenziert werden können. Früher gehörte dazu auch fonts.com. Diese Plattform wurde jetzt aber in monotypfonts.com übertragen. Dort werden diverse Abo's angeboten die aber eher auf Desktopschriften ausgerichtet sind. Einzelne Webfonts lassen sich günstiger über myfonts.com lizenzieren. Meist werden aber, analog Adobe Fonts, wiederholende Kosten fällig. Die Lizenzierung erfolgt meist über die Anzahl Zugriffe auf Webseiten (Pageviews). Die Pageviews werden monatlich pro Konto analysiert. Das bedeutet aber auch, dass wir ein Code Snippet in die Webseite integrieren müssen welches mit Monotype kommuniziert. Dies sollte in der Datenschutzverordnung erwähnt werden.
Nachtrag: Diesen Absatz haben wir Ende 2023 umgeschrieben. Früher konnten wir über fonts.com Lizenzen für viele Web-Schriften über unser Konto abwickeln. Dies ist mit dem Übertag von fonts.com zu monotypefonts.com nicht mehr möglich. Mehr Informationen über dieses Thema gibt es hier.
Google Fonts
Google bietet etliche Schriften lizenzfrei zur Verfügung. Das bedeutet alle Fonts können unbeschränkt von Pageviews und sogar Art der Nutzung benutzt werden. So kann man alle Fonts auch als Desktopfont herunterladen und nach Belieben einsetzen. Standardmässig werden Google Fonts jedoch nicht von unserem Server, sondern von Google Servern in den USA geladen. Dieses entspricht nicht dem DSG der Schweiz und auch nicht der DSGVO. Darum hosten wir Google Fonts auf unseren eigenen Servern. Das wird von Google geduldet aber ist wohl in einer rechtlichen Grauzone. Auch müssen wir die Schriftstile mittels eines Drittanbieters umwandeln (Google Fonts erlaubt nur den download von .ttf Dateien. Wie weiter oben erwähnt benötigen wir aber .woff). Wenn ihr sicher gehen wollt und der DSGVO entsprechen wollt, empfehlen wir euch auf einen anderen Anbieter umzusteigen.
Nachtrag: Diesen Absatz haben wir im September 2022 umgeschrieben. Es stand, dass eine blosse Erwähnung, das man Google Fonts verwendet, der DSGVO genügt. In einem Urteil von anfangs 2022, wurde aber explizit erwähnt, dass Webseiten Besuchende wählen müssen können, ob sie der Übertragung zustimmen oder nicht.
Extraset Typefoundry
Als Beispiel für einen kleineren unabhängigen Schriftenhersteller, bei dem man die entworfenen Schriften direkt beziehen kann, haben wir Extraset aus Genf gewählt. Ein anderes Beispiel wäre swisstypefaces. Diese Hersteller bieten ebenfalls Schriften an welche für das Web genutzt werden können. Bei Extraset sind die Lizenzkosten abhängig von den Pageviews. Man bezahlt die Lizenz einmalig und kann sie dann ohne weitere Kosten auf der Webseite verwenden. Bei swisstypefaces ist es sogar noch einfacher. Dort ist die Webfont im Paket mit den Desktopschriften inklusive. Schriften von solchen Anbietern findet man oftmals nicht bei den grossen Fontanbietern. Da diese Webfonts nicht so verbreitet wie die Schriften der grossen Anbieter, kann man sich sichtbar von anderen Unternehmen abgrenzen. Man unterstützt dabei direkt die Schriftendesigner:innen und es ist oft erst noch datenschutzfreundlicher. Siehe nächster Absatz.
Datenschutz
Und was bedeutet die Einbindung von Webfonts für den Datenschutz? Wir binden die Schriften immer auf unseren Servern ein. Damit müssen die Schriften beim Seitenaufruf nicht von Servern im Ausland geladen werden. Was laut dem neuen Datenschutzgesetz der Schweiz, welches sich an die DSGVO der EU anlehnt, besser ist. Jedoch gibt es einen Hacken. Laut den Nutzungsbedingungen von einigen Anbietern wie Monotype und Adobe Fonts, müssen wir bei der Einbindung ein Script integrieren, welches die Seitenaufrufe misst. Denn die Kosten für die Lizenzierung sind abhängig von den Seitenaufrufen. Da dieses Script mit Servern ausserhalb der Schweiz kommuniziert, müssen solche Einbindungen in der Datenschutzerklärung genannt werden. Für den Datenschutz sind also Lizenzierungsmodelle, welche einmalige Kosten vorsehen, wesentlich besser als Modelle mit jährlichen Kosten. Ein weiterer Grund, im Web auf die Schriften der grossen Anbieter zu verzichten.
Wir hoffen, wir konnten dir einige neue Informationen über Webfonts aufzeigen. Falls du Bemerkungen oder Fragen hast, kannst du uns jederzeit kontaktieren.
Wir arbeiten mit Hochdruck an einer Lösung zur Behebung der Probleme.