Webfonts mit @font-face

Die Zeit für individuelle Schriftarten im Web ist da! Jetzt, da Firefox 3.5, Safari ab 3.1 und Opera ab 10 den CSS3-Selektor @font-face unterstützen und Microsoft mit dem proprietäre Embedded Open Type Format (.eot) bereits seit Internet Explorer 5 in Spiel ist, gibt es kaum mehr einen Grund, Webfonts nicht zu verwenden.

Endlich ist Schluss mit dem Einheitslook aus Arial, Verdana, Helvetica und Times New Roman. Nicht, dass das schlechte Schriften wären, aber wenn alle Websites gleich aussehen, wünscht sich so mancher Kreativer etwas Abwechslung und ein individuelles Schriftbild.

Im neuen Design von ceterumcenseo.net musste also auf jeden Fall ein individueller Font für die Überschriften her. Ergebnis meiner Erfahrungen ist das folgende Tutorial, bei dem ich versucht habe, mich auf das Wesentliche zu konzentrieren, ohne auf zu viele Umwege und Varianten einzugehen. Ziel: Es soll einfach laufen, ohne eine Doktorarbeit daraus werden zu lassen.

Schritt 1: Frei verwendbaren Font finden

Vorsicht beim Einbetten von Webfonts per @font-face: Die Lizenzbedingungen der meisten Schriften erlauben eine solche Verwendung nicht, weil damit die Fonts-Datei im Web zum Download bereitgestellt wird. Böse Raubkopien also. Wichtig ist daher, eine Schrift zu verwenden, die eine entsprechende Lizenz hat – oder gleich auf einen freien Font zurückzugreifen.

Die beste Quelle dazu ist Font Squirrel. Dort gibt es eine große Sammlung an komplette Font-Pakete für die Web-Nutzung, mit den Fonts sowohl im Truetype- oder Open-Font-Type-Format (.ttf, .otf) als auch im Microsoft-Format .eot. Wer ein solches Paket auswählt, kann Schritt 2 getrost überspringen.

Schritt 2: Fonts anpassen

Wer’s individueller will, kann aber auch jeden anderen freien Font oder gar selbst erstellte Schriften verwenden, muss dafür aber etwas mehr Arbeit in Kauf nehmen. Dabei spielen zwei Aspekte eine Rolle:

1. Macht der TTF-Font bei der Konvertierung oder im Browser Probleme, ist eine erneute Konvertierung nach TTF nötig, um Fehlerquellen in der Original-Datei zu eliminieren. Das Open-Source-Tool Fontforge ist zwar kein Ausbund an Bedienerfreundlichkeit, aber sehr effektiv sowohl beim Erstellen komplett eigener Fonts als auch beim Einlesen fehlerhafter Fonts-Dateien und beim Exportieren fehlerfreier TTFs. Und es gibt ein deutschsprachiges Tutorial.
2. Ein wichtiger Aspekt ist die Dateigröße des gewählten Fonts. Schließlich bringt eine schöne Schrift nicht viel, wenn der User dafür zusätzliche 250 KByte oder mehr für die Font-Datei herunterladen muss. Wer eine Schrift lediglich für Überschriften verwendet, kann möglicherweise eine Vielzahl an Sonderzeichen entbehren und damit die Schrift-Datei optimieren. Ein praktisches Online-Tool dafür ist der Font Optimizer, der reduzierte TTF-Files produziert. Wem die Auswahl an Fonts dort nicht reicht, kann das Perl-Script auch selbst einsetzen und dann beliebige Fonts reduzieren. Ebenfalls nicht sehr bedienerfreundlich, aber effektiv.

Schritt 3: Schrift für Internet Explorer ins eot-Format konvertieren

Liegt der Font in Truetype oder OTF-Format vor, ist für den Internet Explorer einen Konvertierung ins EOT-Format nötig. Microsoft stellt dafür ein kostenloses, aber etwas nerviges Tool namens WEFT 3.2 zur Verfügung, das seinen Zweck aber erfüllt (Update: bessere Lösung ist tft2eot; Danke Zara für den Tipp – siehe Kommentar unten). Für Linux und MacOS X gibt’s ebenfalls eine Lösung, die ich allerdings nicht ausprobiert habe: How to create EOT files without Microsoft WEFT.

Um mit WEFT eine Truetype-Schrift ins EOT-Format zu konvertieren, muss der Font zunächst unter Windows installiert werden (TTF-Datei ins Schrift-Verzeichnis in der Systemsteuerung kopieren). WEFT starten und beim ersten Start dem Erstellen des Font-Repositories zustimmen.
Wichtig ist, nicht den Wizard zu verwenden. Stattdessen führen folgende Schritte zum Erfolg:

• Tools – Add Web Pages – Domain(s) eintragen, unter denen der Font verwendet werden soll. Die Schrift wird später nur beim Aufruf von diesen Domains funktionieren. Wichtig: Auch an Subdomains denken und immer die Varianten http://www.domain.de und http://domain.de abgeben.
• Tools – Fonts to embed – Font hinzufügen, dann Close
• Tools – Create Font Objects

Und schon haben wir die für Internet Explorer nötige Font-Datei im EOT-Format.

Schritt 4: Schrift in CSS einbinden und verwenden

/* zuerst IE6/7/8 */
@font-face {
   font-family: MeineSchrift;
   src: url('pfad/meineschrift.eot');
}

/* dann für alle anderen Browser */
@font-face {
   font-family: MeineSchrift;
   src: url('pfad/meineschrift.ttf') format('truetype');
}

/* jetzt lässt sich der Font wie jede andere Schrift benutzen, z.B.: */
h1 { font-family: MeineSchrift, Helvetica, sans-serif; }

Wichtig ist dabei, dass die Deklaration für den Internet Explorer zuerst kommt, weil die anderen Browser sonst bei dem Versuch scheitern, die eot-Datei zu laden und somit die Schrift nicht anzeigen würden.

Um Ladezeiten beim User zu sparen, kann die CSS-Deklaration auch noch erweitert werden um Namen, die der Font möglicherweise hat, wenn er beim User bereits lokal installiert ist. Benutzen Sie also einen Font, der möglicherweise eine gewisse Verbreitung hat, lohnt sich der zusätzliche Code:

@font-face {
   font-family: MeineSchrift;
   local('Meine Schrift'),
   local('MeineSchrift'),
   local('wie auch immer die schrift heißen könnte'),
   src: url('pfad/meineschrift.ttf') format('truetype');
}

Schritt 5: Testen

Ganz entscheidend ist, die verwendete Schrift in der Praxis in diversen Browsern und mit unterschiedlichen Größeneinstellungen zu testen. Denn bei Weitem nicht alle Fonts sehen in allen Größen gut und leserlich aus und nicht alle Fonts rendern im Browser – vor allem in kleineren Schriftgrößen – noch akzeptabel. Ausprobieren lohnt sich also, und zwar auch mit krummen Schriftgrößen wie 0.8em.

Für ceterumcenseo.net habe ich eine Schrift gefunden, die mir persönlich sehr gut gefällt. Sie ist nicht sehr auffällig (vermeidet den berüchtigten Corel-Draw-Clip-Art-Effekt), sieht in der Überschriften-Größe des Blogs gut aus und verleiht dem Blog ein individuelles Bild, ohne direkt ins Auge zu stechen. Denn schließlich will ich ja mit Webfonts nicht Aufmerksamkeit zum Selbstzweck heischen, sondern einfach nur etwas unaufdringlichen Individualismus umsetzen.

Wer noch einen alten Browser benutzt – so sieht’s aus mit der verwendeten Schrift Ogirema Bold von Manfred Klein, dessen Website ebenfalls eine wahre Fundgrube für schöne, interessante und ausgefallene Schriften ist.

Ältere Browser

Beispiel für eingebundene Schrift via @font-face - hier OgiremaBold

Bleibt das Problem, dass User von nicht absolut aktuellen Browsern nicht in den Genuss der eingebetteten Schriften kommen. Ich persönlich vernachlässige beziehungsweise ignoriere das. Denn erfreulicherweise entstehen dadurch keine wirklichen Probleme. Da Ganze sieht eben nur nicht ganz so schön aus – Arial statt individueller Font eben.

In keinem Fall steht für mich persönlich der Aufwand dafür, für ältere Browser zusätzlich eine Fallback-Lösung zu bauen. Aber wer sich mit diesem Thema näher beschäftigen will, hier einige Möglichkeiten:

• Diverse Varianten des Image Replacement
• Mike Davidsons IFR 2.0
• Cufon
• Facelift Image Replacement (FLIR)