Web-Typografie: @font-face-Einbindung selbst gemacht

Webfonts müssen Sie nicht von einem externen Anbieter mieten. Sie können auch ganz normale Desktop-Schriften für einen Browser-übergreifenden Einsatz fit machen, um sie über den eigenen Webserver in die Webseite einzubinden.

Vorsicht bei der Auswahl der Schriften

Dies setzt natürlich erst einmal voraus, dass die Lizenzbedingungen der Schrift dies gestatten. Kommerzielle Schriftlizenzen verbieten praktisch immer, dass die Schrift auf einem öffentlichen Webserver abgelegt wird. Genau dies ist aber beim Einsatz über die @font-face-Regel zwingend erforderlich.

Die Anbieter kommerzieller Schriften setzen momentan vor allem auf die Webfont-Dienste, die im vorigen Teil dieser Artikel-Serie vorgestellt wurden. Nur wenige Anbieter liefern direkt spezielle Webfont-Pakete aus, die man auf den eigenen Webserver laden kann. Möglich ist das zum Beispiel bei den Webschriften von FSI FontShop International oder bei Fontspring.

Man kann jedoch hoffen, dass mit der Durchsetzung des Web-Open-Font-Formates (WOFF) noch mehr Anbieter dies ebenfalls ermöglichen werden.

Freie und Open-Source-Fonts einbinden

Dennoch bieten sich auch jede Menge Freeware- und Open-Source-Fonts zur Einbindung in die eigene Webseite an. Eine Liste mit empfehlenswerten Schriften, die speziell für die @font-face-Einbindung freigegeben sind, können Sie auf webfonts.info einsehen.

Auch die Webseite fontsquirrel.com bieten einen großen Katalog von entsprechenden Fonts. Darüber hinaus ist Fontsquirrel auch die erste Anlaufstelle, um Schriften in die unterschiedlichen Webfont-Formate zu konvertieren. Dazu bietet die Seite einen leistungsstarken @font-face-Generator an.

Schriften mit dem @font-face-Generator in Webfonts umwandeln

Laden Sie zum Beispiel das Fontpaket der Graublau Sans Web herunter. Die Schrift wird als PostScript-basierter OpenType-Font angeboten und lässt sich theoretisch ohne weitere Bearbeitung in Safari (ab 3.1), Firefox (ab 3.5) und Opera (ab 10) verwenden. Um aber die Browser-Unterstützung und die Darstellungsqualität unter Windows zu optimieren, kommt nun der @font-face-Generator zum Einsatz. Laden Sie zunächst die Schriften zusammen in den Generator hoch und wählen Sie die Expert-Einstellungen. Die möglichen Optionen werden nun detailliert erklärt.

Fontformate

Eine EOT-Version muss für eine Unterstützung des Internet Explorers ab Version 4 in jedem Falle erstellt werden. Mit den SVG-Fonts wird vor allem Mobile Safari auf iPhone und iPad abgedeckt, auch wenn Chrome und Opera dieses Format ebenfalls unterstützen. Alternativ oder zusätzlich kann hier auch die komprimierte Variante SVGZ benutzt werden, die zwar nicht auf dem iPhone funktioniert, aber eine deutlich kleinere Dateigröße bietet.

Das Erstellen des TrueType-Formats bringt die Unterstützung für Safari (ab 3.1), Firefox (ab 3.5) und Opera (ab 10). Zu beachten ist, dass dieser Generator keine komprimierte EOT-Datei erstellt. Tipp: Ist die entstandene Datei zu groß, sollte man besser noch den Umweg über das Tool EOTFast gehen.

Eine zusätzlich erstellte WOFF-Datei vergrößert die Browser-Unterstützung bislang nicht weiter, aber als zukünftiges Standard-Webfont-Format kann man diese Fontversionen ruhig ebenfalls generieren lassen.

Optionen

Die Option „Add Hinting“ bringt für die meisten Fonts eine Verbesserung der Darstellung unter Windows. Sie sollte lediglich abgewählt werden, wenn man weiß, dass die vorliegenden Fonts bereits eine explizite Bildschirmoptimierung mitbringen.

Die Option „WebOnly™“ fügt der Schrift gewisse Modifikationen hinzu, die dazu führen, dass die Fonts zwar von Browsern benutzt werden können, aber sich nicht unter den gängigen Betriebssystemen installieren lassen. Diese Option hilft daher ungewolltes Raubkopieren der Fonts zu verhindern.

Druckschriften können über eine Vielzahl von OpenType-Funktionen verfügen. Da diese aber bislang kaum von Browsern unterstützt werden, ist es meist ratsam, diese beim Webfont-Einsatz zu entfernen, um die Dateigröße klein zu halten. Um dennoch einige Standard-OpenType-Funktionen wie zum Beispiel Ligaturen zu ermöglichen, kann die Einstellung „Keep OT Features“ aktiviert werden.

Die Option „Remove Kerning“ hilft ebenfalls die Dateigröße klein zu halten, da alle Unterschneidungswerte entfernt werden, die für bestimmte Buchstaben-Kombinationen hinterlegt sind. Sollen die Schriften in Fließtexten eingesetzt werden, ist dies durchaus zu empfehlen. Beim Einsatz in Überschriften kann das Fehlen der Unterschneidungswerte aber je nach Schrift zu unschönen Löchern im Wortbild führen.

Die Option „Simplify Outlines“ versucht die Buchstaben-Umrisse zu vereinfachen. Dies ist jedoch mit einem Qualitätsverlust verbunden und eher nicht zu empfehlen.

Die Option „Build Cufón File“ gehört nicht direkt zu den Optionen der @font-face-Einbindung. Weitere Informationen gibt es auf der Cufón-Webseite.

Subsetting

Unter Subsetting versteht man das Entfernen von Schriftzeichen, die im Einsatz nicht benötigt werden. Inwieweit dies erforderlich ist, hängt stark von den jeweiligen Fonts ab. Manche Fonts können tausende Buchstaben unterschiedlicher Schriftsysteme enthalten und damit die Fontdatei auf mehrere Megabyte aufblähen. Solche Fonts sind ohne Subsetting für den Webfont-Einsatz nicht geeignet.

Die Option „Basic Subsetting“ bildet die Standardvariante und bietet die übliche westeuropäische Zeichenbelegung auf Basis des Zeichensatzes MacRoman. Über „Custom Subsetting …“ kann der Anwender völlig frei über den Zeichenumfang entscheiden. Die Option „No Subsetting“ schaltet das Subsetting ganz ab und konvertiert den Font mit allen enthaltenen Zeichen.

CSS-Formate

Der @font-face-Generator erstellt zu den konvertierten Schriften auch gleich die passende CSS-Datei. Dies erleichtert die Arbeit der Webdesigner ungemein, da bei mehreren Fonts und den vielen unterschiedlichen Fontformaten der CSS-Code sehr lang ausfallen kann. Drei Varianten stehen zur Auswahl „Mo‘ Bulletproofer“, „Bulletproof (Original)“ und „Bulletproof (Smiley)“. Eine korrekte Syntax ist entscheidend, damit die Fonts korrekt registriert werden und die vom jeweiligen Browser nicht unterstützten Fonts nicht zusätzlich geladen und damit die Ladezeit erhöhen. Alle drei Varianten lösen dabei verschiedene Browser-spezifische Probleme. Die Smiley-Variante sorgt zudem dafür, dass der Font nicht durch eine lokal installierte Version der Schrift angezeigt wird.

CSS-Optionen

Die Option „Style Linking“ fasst Schriften einer Familie zusammen. Dadurch lassen sich die Fonts später bequem und einfach über font-weight und font-style ansprechen. Das ganze funktioniert aber nur zuverlässig, wenn die Schriftfamilie nicht über mehr als die 4 üblichen Vertreter normal, kursiv, fett und fett-kursiv verfügt. Ansonsten sollte diese Option nicht verwendet werden und die Fonts werden dann alle separat über einen unabhängigen Familiennamen angesprochen.

Die letzte Option „Base64 Encode“ erstellt die Webfonts nicht als separate Font-Datei sondern fügt sie mit einer Base64-Verschlüsselung direkt in den CSS-Code ein. Dies hat zum Beispiel zur Folge, dass die Fonts nicht mehr direkt als Fontdateien im Browser-Cache zu finden sind.

Code-Beispiel

Und so sieht ein Beispiel-Code der @font-face-Einbindung aus.

@font-face {
font-family: 'GraublauWeb';
src: url('graublauwebbold-webfont.eot');
src: local('☺'),url('graublauwebbold-webfont.woff') format('woff'),
url('graublauwebbold-webfont.ttf') format('truetype'),
url('graublauwebbold-webfont.svg#webfontDGhCBjc5') format('svg');
font-weight: bold;
font-style: normal;
}

Der Aufruf der EOT-Datei für den Internet Explorer steht immer an erster Stelle und darf keine Format-Angabe enthalten. Die restlichen Schriftformate sind alle in einem Komma-separierter Aufruf zusammengefasst, der durch die Einleitung mit local() vor dem Internet Explorer versteckt wird. Die SVG-Deklaration enthält zudem einen zusätzlichen Hash-Tag als eindeutige Identifikationsnummer. Dies ist notwendig, da in einer SVG-Datei verschiedene Fonts eingebetten sein können. Der @font-face-Generator von Fontsquirrel kümmert sich jedoch selbstständig um die Vergabe der Identifikationsnummer und deren Einbettung in den CSS-Code.

Ladezeit leidet durch zu viele Fonts

Durch die oben genannten Maßnahmen lassen sich die erstellten Webfonts üblicherweise auf circa 30 bis 60 Kilobyte reduzieren. Größere Fontdateien oder zu viele Fonts auf einer Webseite können die Anzeige der Webseite zu sehr verlangsamen, insbesondere auf mobilen Geräten.

Zwiespältige Zwischenlösung von Firefox

Die meisten Browser zeigen keinerlei Text an, bevor die Webfonts heruntergeladen sind. Bei Firefox wird zwischenzeitlich ein Systemfont benutzt und der Text dann mit der fertig geladenen Webschrift neu umbrochen. Dies nennt man „flash of unstyled text“, ein in vielen Fällen unerwünschter Effekt, der sich nur durch Tricks umgehen lässt.

Der mit obiger Methode erstellte Webfont in Safari unter Mac OS X

Im nächsten Teil der Serie lesen Sie:

• Ausblick – Schrift im Web