So nutzen Sie @font-face

© Internet Magazin

Früher galt für Webdesigner der Grundsatz: Halten Sie sich an Schriftarten, die auf jedem Endgerät verfügbar sind und nutzen Sie keine Exoten. Das schränkte die Gestaltungsmöglichkeiten stark ein: Fast jede Website kam schriftenmäßig im Einheitslook daher, meist mussten Verdana, Times oder Arial/Helvetica herhalten. Sollte doch einmal eine andere Schrift das Bild aufwerten, musste sie als Grafik dargestellt werden - nicht wirklich empfehlenswert.Zwar gab es Ende der 90er Jahre schon Bemühungen, über die @font-face-Regel Fonts auf dem Server abzulegen und mit der Website zusammen auszuliefern, was sich aber wegen der unbefriedigenden Kantenglättung in der Darstellung der Schriftarten nicht durchsetzen konnte. Erst 2008 war die Technik der Bildschirmdarstellung so weit , dass @font-face im zweiten Anlauf erfolgreich wurde.Das Prinzip bei der Nutzung von Webfonts ist, dass die Fontdateien genau wie die anderen Elemente der Website auf einem Webserver liegen und beim Aufruf der Website auf den Client geladen werden. Dabei können die Fontdateien entweder auf dem eigenen oder einem fremden Webserver liegen - der Speicherort wird nicht zuletzt durch die Lizenzbestimmungen beeinflusst.

Beispiel: Fontsquirrel

Am einfachsten lässt sich der Vorgang anhand eines Beispiels zeigen. Auf fontsquirrel.com gibt es nicht nur haufenweise kostenlose Fonts, die sogar für die kommerzielle Nutzung frei sind, sondern auch fertige Font Face Kits: kleine Pakete, in denen alles Nötige enthalten ist, um sofort eine HTML-Seite mit Webfonts auszugeben. Für das Beispiel nehmen wir den Schreibmaschinen-Font Special Elite, den Sie hier finden.Mit einem Klick auf download the kit laden Sie eine ZIP-Datei herunter, die alle benötigten Dateien enthält:

• Apache License Version 2.txt: Lizenzdatei
• demo.html: Website mit Text und Formatierungen
• stylesheet.css: Stylesheet, in dem die Schriftartdateien mit Speicherort angegeben werden
• SpecialElite-webfont.eot: IE Embedded Font (Webfont-Datei für Internet Explorer)
• SpecialElite-webfont.svg: Scalable Vector Graphics Font (Webfont-Datei für Safari, Opera)
• SpecialElite-webfont.ttf: True Type Font (Webfont-Datei für Safari, Chrome, Firefox, Opera)
• SpecialElite-webfont.woff: Web Open Font Format Font (Webfont-Datei für Mozilla/Firefox, Chrome, Internet Explorer 9, Opera, zukünftige Safari-Versionen)

© Internet Magazin

Die verschiedenen Typen von Schriftartdateien werden benötigt, weil nur so alle Browser abgedeckt werden. Eine Übersicht, welche Browser und Browserversionen welches Schriftartenformat unterstützen, finden Sie unter webfonts.info. Woff wird als das Einheits-Webfont-Format der Zukunft gehandelt, so dass die Hoffnung besteht, dass zukünftig alle Browser dieses Format unterstützen und nicht mehr verschiedene Formate parallel vorgehalten werden müssen.Sehen wir uns nun die HTML-Datei an (diese finden Sie im Internet unter www.internet-magazin.de, Listings). Im Header- Bereich ist die CSS-Datei eingebunden, zusätzlich befinden sich auch in dieser HTML-Datei CSS-Formatangaben. Diese könnten aber genauso gut in die separate CSS-Datei ausgelagert werden. Als Font wird der Webfont aus unserem Paket definiert, mit Arial und sans-serif als Alternativen für Browser, die keine Webfonts darstellen können.Nun der Blick in die CSS-Datei. Über die Regel @font-face werden die verschiedenen auf dem Webserver liegenden Schriftartdateien eingebunden und die Formate zugewiesen. Die grundlegende Syntax dabei ist:

@font-face{
font-family: 'Schriftname';
src: url(Schriftdatei.woff);

Als erstes wird dem Webfont eine Schriftartfamilie Schriftname zugewiesen, in der folgenden Zeile wird dann die URL für diese Schriftart angegeben, als relativer Pfad, genau wie bei Bildern auch.Falls Sie annehmen, dass die Fontdatei bereits auf dem Rechner Ihres Besuchers vorhanden könnte, können Sie außerdem noch die Quelle local hinzufügen - das verringert die Ladezeit für Ihren Besucher und schont das Transfervolumen Ihres Webservers:

@font-face{
font-family: 'Schriftname';
src: local ("Schriftname"),
url(Schriftdatei.woff);
}

In der Praxis sieht es dann noch etwas komplexer aus, wie der Blick in die von Fontsquirrel generierte CSS-Datei aus unserem Beispiel zeigt:

/* Generated by Font Squirrel
(http://www.fontsquirrel.com) on November 1, 2011 09:37:42 PM America/New_York */
@font-face {
font-family: 'SpecialEliteRegular';
src: url('SpecialElite-webfont.eot');
src: url('SpecialElite-webfont.
eot?#iefix') format('embedded-opentype'),
url('SpecialElite-webfont.woff')
format('woff'),
url('SpecialElite-webfont.ttf')
format('truetype'),
url('SpecialElite-webfont.
svg#SpecialEliteRegular') format('svg');
font-weight: normal;
font-style: normal;
}

Um die verschiedenen Browser zu berücksichtigen, die unterschiedliche Formate erwarten, müssen auch alle Formate separat eingebunden werden, mit der Anweisung format wird dem Browser mitgeteilt, um welchen Schriftartentyp es sich handelt. Font Spring erläutert die Syntax der CSS-Datei so:

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9
Compat Modes */
src: url('webfont.eot?#iefix') format
('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'),
/* Modern Browsers */
url('webfont.ttf') format
('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName')
format('svg'); /* Legacy iOS */
}

© Internet Magazin

Wie üblich beansprucht der Internet Explorer hier eine Sonderbehandlung.Laden Sie nun alle Dateien aus dem Paket via FTP auf Ihren Webserver. Natürlich können Sie die Dateien der besseren Übersichtlichkeit halber auf Unterverzeichnisse aufteilen - passen Sie dann nur die Pfade in der HTML- und der CSS-Datei entsprechend an. Wenn Sie dann die HTML-Seite im Browser aufrufen, sehen Sie die Seite mit korrekter Webfont-Darstellung. Sie haben die gleichen CSS-Formatierungsmöglichkeiten zur Verfügung wie auch bei normalen Systemschriften wie beispielsweise Verdana, können also Textfarbe, -größe usw. beliebig definieren.

Darstellungsprobleme

Aufgrund der unterschiedlichen Schriftglättungsverfahren werden Webfonts je nach Kombination aus Browser und Betriebssystem unterschiedlich dargestellt. Was das bedeutet, merken Sie selbst schnell, wenn Sie in der angezeigten Beispielseite mit Strg+- die Schriftgröße verkleinern. Die Schrift des Textkörpers erscheint dann ausgefranst und ist kaum noch lesbar. Grundsätzlich gilt: Unter 14 Pixel Schriftgröße wird es oft problematisch. Nicht jede Schriftart ist für jede Schriftgröße geeignet, und wer Webfonts mit für den Besucher befriedigenden Ergebnissen einsetzen will, muss sich auf jeden Fall ausführlich mit Typographie beschäftigen und ausgiebig testen.Probleme gibt es auch mit XP-Clients, die womöglich noch die Schriftartenglättung des Betriebssystems ausgeschaltet haben: Der Text bleibt hier zwar lesbar, wirkt aber durch die fehlende Schriftartenglättung ausgefranst.Zudem gibt es in manchen Browser-Versionen den unschönen "Fout-Effekt" (Flash of unstyled text), bei dem Texte für kurze Zeit in Systemschriften dargestellt werden , bis der Webfont vom Server geladen ist.Abhilfe schafft das Javascript "Webfont Load Enhancer ". Das Skript sorgt dafür, dass die Seite so lange verborgen wird, bis die Webfonts geladen und bereit zur Darstellung sind. Zudem fügt das Skript drei neue Font-Klassen hinzu, je nachdem, ob Font Smoothing aktiviert ist oder nicht:

".hasFontSmoothing-true" indicates
activated fontsmooting.
".hasFontSmoothing-false" indicates
no resp. not sufficient fontsmooting.
".hasFontSmoothing-unknown" is the
result for Opera browsers since unfortunately the fontsmooting test doesn't work here.

Diese Klassen können Sie wiederum in Ihrer HTML-Datei verwenden:

p {font-family: Arial, Helvetica, s
ans-serif;}
.hasFontSmoothing-true p {font-
family: "Your cool webfont", Arial, Helvetica, sans-serif;}

Im Beispiel würde dann der Webfont nur geladen, wenn Font Smoothing aktiv ist, ansonsten werden die definierten Systemschriften (hier: Arial, Helvetica, sans-serif) geladen.Auch in Zeiten von DSL und Hochgeschwindigkeits-Internet sollte man bedenken, dass Webfonts gerade bei mobilen Usern längere Ladezeit benötigen und damit nicht nur das mobile Datenvolumen belasten, sondern auch durch die längere Ladezeit die Darstellung der Seite negativ beeinflusst werden kann.Generell kann man natürlich nach Abfrage des User-Agents festlegen, dass Webfonts erst ab einer gewissen Bildschirmauflösung geladen werden oder dass für mobile Endgeräte andere Fonts geladen werden, die auf diesem Gerät besser aussehen und weniger Ladezeit benötigen.

Rechtliches und Bezugsquellen

Wer Webfonts nutzen will, kommt nicht umhin, sich mit dem Thema Lizenzierung zu befassen, denn es gibt eine Menge Schriften, die nur gegen Lizenzgebühr und unter Beachtung der jeweiligen Lizenzbestimmungen verwendet werden dürfen. Zum einen gibt es kostenlose Schriftarten, wie man sie beispielsweise bei fontsquirrel.com oder www.google.com/webfonts bekommt.Andererseits gibt es den riesigen Bereich der kommerziellen Schriften, die in der Regel kostenpflichtig über Webfontservices wie etwa typekit.com oder myfonts.com erhältlich sind. Bei den kommerziellen Schriften gelten unterschiedliche Beschränkungen, beispielsweise Anzahl der Websites, auf denen der Font eingesetzt wird, Anzahl von Seiteneinblendungen pro Monat oder Anzeige einer Anbieter-Badge.Lesen Sie in jedem Fall genau die Lizenzbedingungen und prüfen Sie, ob Sie die Schrift auf Ihrem Server hosten dürfen und ob Sie sie mit Hilfe von Tools wie sIFR interpretieren lassen dürfen, falls Sie das wünschen.

Hosten oder hosten lassen?

Bei manchen Schriften haben Sie keine Wahl: Kommerzielle Schriftarten, die für die Webfont-Nutzung ausschließlich über Webfont-Services angeboten werden, können Sie nicht selbst hosten. Bei freien Schriftarten wie den Google Web Fonts können Sie hingegen wählen, ob Sie die Schriftart auf Ihrem eigenen Server hosten oder vom Google-Server laden. Standardmäßig wird der Google-Server angeboten:

<link href='http://fonts.googleapis.
com/css?family=Nosifer+Caps' rel='stylesheet' type='text/css'>

Vorteil: Sie müssen sich nicht um das Datenvolumen kümmern, weil die Schrift vom Anbieterserver geladen wird. Außerdem sind Sie, was die Lizenzierung angeht, in jedem Fall auf der sicheren Seite, weil Sie auf Ihrem Server keine Schriftdatei zum Download zur Verfügung stellen, was zu Problemen führen kann, wenn Sie eine vermeintlich freie, in Wirklichkeit aber kommerzielle Schriftart anbieten, bei der nur der Urheberrechtshinweis entfernt wurde. Deshalb ist es besonders wichtig, auf die Herkunft der Schriftart zu achten.Der Nachteil dabei: Sollte der Anbieterserver einmal nicht verfügbar oder stark beansprucht sein, wird die Schrift nicht oder verzögert geladen. Außerdem kann der Anbieter so die Besucher Ihrer Website loggen, was streng genommen eine Erweiterung der Datenschutzerklärung auf Ihrer Website nötig macht.