Webfonts: was ist das und wie geht das?

Ja, man kann prinzipiell jede Schrift in einer Website verwenden. Technisch ist das sehr einfach, wenn man ein paar Kleinigkeiten beachtet. Am wichtigsten ist, dass man die erforderlichen Lizenzen für die verwendeten Schriften erworben hat. Das muss nicht unbedingt etwas kosten.

Alle modernen Browser verwenden das Web Open Font Format (WOFF), das in komprimierter Form die Schrift-Datei und ggfs. Lizenzinfos enthält. Ältere Browser verwenden zum Teil direkt TrueType (.ttf) oder (Internet Explorer) das Embedded-OpenType-Format (.eot). Im Web gibt es diverse Tools, um Schriftdateien direkt in die erforderlichen Formate zu konvertieren.

Die Schrift wird in den Browser des Nutzers heruntergeladen und auf dem Rechner verwendet. Abgesehen davon, dass jeder sehen kann, welche Schrift ihr verwendet, besteht die Gefahr von Abmahnungen und Schadenersatzforderungen für hundert- oder tausendfache Unterlizenzierung der Schrift. Das kann teuer werden.

Es gibt mittlerweile eine Vielzahl an freien Webfonts mit Open Source Lizenzen. Verschiedene seriöse Websites bieten solche zum Download an. Außerdem gibt es kostenlose Dienste, z.B. Googlefonts, die kostenlose Schriften sogar hosten. Kommerzielle Schriften werden, z.B. von Typekit (Adobe) gegen eine Gebühr bereitgestellt. Mit einer dieser Lösungen seid ihr auf jeden Fall auf der sicheren Seite.

Technik 1: Wie funktioniert das?

Der Webfont wird in den Browser geladen und dann wie eine Systemschrift verwendet. Dazu wird im CSS der @fontface Tag mit der URL der Fontdatei eingefügt. Die Schrift kann dann einfach, wie alle anderen Schriften, per Name angesprochen werden. Mehr muss man nicht tun. Die Programmierer unter uns wissen, wie das geht.

Technik 2: Woher kommen die Schriften?

Oft werden die Fontdateien direkt vom Server der Website geladen. Als Alternative stehen verschiedene Dienste für das Hosting von Fonts zur Verfügung. Der bekannteste ist Google-Fonts. Die Anbieter stellen meist ein paar Zeilen CSS-Code zur Verfügung, die alles erforderliche erledigen. Vorteil: Man muss sich um nichts weiter kümmern und die Schriften laden auch oft schneller, als vom eigenen Server. Nachteil: Wenn, z.B. in China, Google mal wieder blockiert wird, muss eure Website mit den Standardschriften auskommen.

Mit Webfonts gestalten: Wie kommen die Fonts in Photoshop?

Die meisten Fonts kann man direkt, z.B. als Truetype herunter laden, installieren und dann verwenden. Mittlerweile gibt es aber auch Photoshop-Plugins, die einem diesen Schritt ersparen. Man kann die Fonts direkt aus einer Liste auswählen und sofort verwenden.

Einschränkungen: sehr sehr wenige!

Für Websites gibt es praktisch keine Einschränkungen. Nahezu alle Browser, auch für mobile Geräte, unterstützen heute Webfonts. Aufpassen muss man bei E-Mails. Die meisten Clients unterstütze Webfonts. Aber: Outlook geht bekanntlich für die HTML Darstellung einen Sonderweg. Da geht es nicht. Also sind Webfonts für E-Mails im Prinzip tabu. Schade.