Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Ralf Herrmann 8. Oktober 2010

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

Webfonts müs­sen Sie nicht von einem exter­nen Anbieter mie­ten. Sie kön­nen auch ganz nor­ma­le Desktop-Schriften für einen Browser-über­grei­fen­den Einsatz fit machen, um sie über den eige­nen Webserver in die Webseite ein­zu­bin­den.

Vorsicht bei der Auswahl der Schriften

Dies setzt natür­lich erst ein­mal vor­aus, dass die Lizenzbedingungen der Schrift dies gestat­ten. Kommerzielle Schriftlizenzen ver­bie­ten prak­tisch immer, dass die Schrift auf einem öffent­li­chen Webserver abge­legt wird. Genau dies ist aber beim Einsatz über die @font-face-Regel zwin­gend erfor­der­lich.

Die Anbieter kom­mer­zi­el­ler Schriften set­zen momen­tan vor allem auf die Webfont-Dienste, die im vori­gen Teil die­ser Artikel-Serie vor­ge­stellt wur­den. Nur weni­ge Anbieter lie­fern direkt spe­zi­el­le Webfont-Pakete aus, die man auf den eige­nen Webserver laden kann. Möglich ist das zum Beispiel bei den Webschriften von FSI FontShop International oder bei Fontspring.

Man kann jedoch hof­fen, dass mit der Durchsetzung des Web-Open-Font-Formates (WOFF) noch mehr Anbieter dies eben­falls ermög­li­chen wer­den.

Freie und Open-Source-Fonts einbinden

Dennoch bie­ten sich auch jede Menge Freeware- und Open-Source-Fonts zur Einbindung in die eige­ne Webseite an. Eine Liste mit emp­feh­lens­wer­ten Schriften, die spe­zi­ell für die @font-face-Einbindung frei­ge­ge­ben sind, kön­nen Sie auf webfonts.info ein­se­hen.

Auch die Webseite fontsquirrel.com bie­ten einen gro­ßen Katalog von ent­spre­chen­den Fonts. Darüber hin­aus ist Fontsquirrel auch die ers­te Anlaufstelle, um Schriften in die unter­schied­li­chen Webfont-Formate zu kon­ver­tie­ren. Dazu bie­tet die Seite einen leis­tungs­star­ken @font-face-Generator an.

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

Laden Sie zum Beispiel das Fontpaket der Graublau Sans Web her­un­ter. Die Schrift wird als PostScript-basier­ter OpenType-Font ange­bo­ten und lässt sich theo­re­tisch ohne wei­te­re Bearbeitung in Safari (ab 3.1), Firefox (ab 3.5) und Opera (ab 10) ver­wen­den. Um aber die Browser-Unterstützung und die Darstellungsqualität unter Windows zu opti­mie­ren, kommt nun der @font-face-Generator zum Einsatz. Laden Sie zunächst die Schriften zusam­men in den Generator hoch und wäh­len Sie die Expert-Einstellungen. Die mög­li­chen Optionen wer­den nun detail­liert erklärt.

Fontformate

Eine EOT-Version muss für eine Unterstützung des Internet Explorers ab Version 4 in jedem Falle erstellt wer­den. Mit den SVG-Fonts wird vor allem Mobile Safari auf iPhone und iPad abge­deckt, auch wenn Chrome und Opera die­ses Format eben­falls unter­stüt­zen. Alternativ oder zusätz­lich kann hier auch die kom­pri­mier­te Variante SVGZ benutzt wer­den, die zwar nicht auf dem iPhone funk­tio­niert, aber eine deut­lich klei­ne­re Dateigröße bie­tet.

Das Erstellen des TrueType-Formats bringt die Unterstützung für Safari (ab 3.1), Firefox (ab 3.5) und Opera (ab 10). Zu beach­ten ist, dass die­ser Generator kei­ne kom­pri­mier­te EOT-Datei erstellt. Tipp: Ist die ent­stan­de­ne Datei zu groß, soll­te man bes­ser noch den Umweg über das Tool EOTFast gehen.

Eine zusätz­lich erstell­te WOFF-Datei ver­grö­ßert die Browser-Unterstützung bis­lang nicht wei­ter, aber als zukünf­ti­ges Standard-Webfont-Format kann man die­se Fontversionen ruhig eben­falls gene­rie­ren las­sen.

Optionen

Die Option „Add Hinting“ bringt für die meis­ten Fonts eine Verbesserung der Darstellung unter Windows. Sie soll­te ledig­lich abge­wählt wer­den, wenn man weiß, dass die vor­lie­gen­den Fonts bereits eine expli­zi­te Bildschirmoptimierung mit­brin­gen.

Die Option „WebOnly™“ fügt der Schrift gewis­se Modifikationen hin­zu, die dazu füh­ren, dass die Fonts zwar von Browsern benutzt wer­den kön­nen, aber sich nicht unter den gän­gi­gen Betriebssystemen instal­lie­ren las­sen. Diese Option hilft daher unge­woll­tes Raubkopieren der Fonts zu ver­hin­dern.

Druckschriften kön­nen über eine Vielzahl von OpenType-Funktionen ver­fü­gen. Da die­se aber bis­lang kaum von Browsern unter­stützt wer­den, ist es meist rat­sam, die­se beim Webfont-Einsatz zu ent­fer­nen, um die Dateigröße klein zu hal­ten. Um den­noch eini­ge Standard-OpenType-Funktionen wie zum Beispiel Ligaturen zu ermög­li­chen, kann die Einstellung „Keep OT Features“ akti­viert wer­den.

Die Option „Remove Kerning“ hilft eben­falls die Dateigröße klein zu hal­ten, da alle Unterschneidungswerte ent­fernt wer­den, die für bestimm­te Buchstaben-Kombinationen hin­ter­legt sind. Sollen die Schriften in Fließtexten ein­ge­setzt wer­den, ist dies durch­aus zu emp­feh­len. Beim Einsatz in Überschriften kann das Fehlen der Unterschneidungswerte aber je nach Schrift zu unschö­nen Löchern im Wortbild füh­ren.

Die Option „Simplify Outlines“ ver­sucht die Buchstaben-Umrisse zu ver­ein­fa­chen. Dies ist jedoch mit einem Qualitätsverlust ver­bun­den und eher nicht zu emp­feh­len.

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 ver­steht man das Entfernen von Schriftzeichen, die im Einsatz nicht benö­tigt wer­den. Inwieweit dies erfor­der­lich ist, hängt stark von den jewei­li­gen Fonts ab. Manche Fonts kön­nen tau­sen­de Buchstaben unter­schied­li­cher Schriftsysteme ent­hal­ten und damit die Fontdatei auf meh­re­re Megabyte auf­blä­hen. Solche Fonts sind ohne Subsetting für den Webfont-Einsatz nicht geeig­net.

Die Option „Basic Subsetting“ bil­det die Standardvariante und bie­tet die übli­che west­eu­ro­päi­sche Zeichenbelegung auf Basis des Zeichensatzes MacRoman. Über „Custom Subsetting …“ kann der Anwender völ­lig frei über den Zeichenumfang ent­schei­den. Die Option „No Subsetting“ schal­tet das Subsetting ganz ab und kon­ver­tiert den Font mit allen ent­hal­te­nen Zeichen.

CSS-Formate

Der @font-face-Generator erstellt zu den kon­ver­tier­ten Schriften auch gleich die pas­sen­de CSS-Datei. Dies erleich­tert die Arbeit der Webdesigner unge­mein, da bei meh­re­ren Fonts und den vie­len unter­schied­li­chen Fontformaten der CSS-Code sehr lang aus­fal­len kann. Drei Varianten ste­hen zur Auswahl „Mo’ Bulletproofer“, „Bulletproof (Original)“ und „Bulletproof (Smiley)“. Eine kor­rek­te Syntax ist ent­schei­dend, damit die Fonts kor­rekt regis­triert wer­den und die vom jewei­li­gen Browser nicht unter­stütz­ten Fonts nicht zusätz­lich gela­den und damit die Ladezeit erhö­hen. Alle drei Varianten lösen dabei ver­schie­de­ne Browser-spe­zi­fi­sche Probleme. Die Smiley-Variante sorgt zudem dafür, dass der Font nicht durch eine lokal instal­lier­te Version der Schrift ange­zeigt wird.

CSS-Optionen

Die Option „Style Linking“ fasst Schriften einer Familie zusam­men. Dadurch las­sen sich die Fonts spä­ter bequem und ein­fach über font-weight und font-style anspre­chen. Das gan­ze funk­tio­niert aber nur zuver­läs­sig, wenn die Schriftfamilie nicht über mehr als die 4 übli­chen Vertreter nor­mal, kur­siv, fett und fett-kur­siv ver­fügt. Ansonsten soll­te die­se Option nicht ver­wen­det wer­den und die Fonts wer­den dann alle sepa­rat über einen unab­hän­gi­gen Familiennamen ange­spro­chen.

Die letz­te Option „Base64 Encode“ erstellt die Webfonts nicht als sepa­ra­te Font-Datei son­dern 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 fin­den 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 ers­ter Stelle und darf kei­ne Format-Angabe ent­hal­ten. Die rest­li­chen Schriftformate sind alle in einem Komma-sepa­rier­ter Aufruf zusam­men­ge­fasst, der durch die Einleitung mit local() vor dem Internet Explorer ver­steckt wird. Die SVG-Deklaration ent­hält zudem einen zusätz­li­chen Hash-Tag als ein­deu­ti­ge Identifikationsnummer. Dies ist not­wen­dig, da in einer SVG-Datei ver­schie­de­ne Fonts ein­ge­bet­ten sein kön­nen. Der @font-face-Generator von Fontsquirrel küm­mert sich jedoch selbst­stän­dig um die Vergabe der Identifikationsnummer und deren Einbettung in den CSS-Code.

Ladezeit leidet durch zu viele Fonts

Durch die oben genann­ten Maßnahmen las­sen sich die erstell­ten Webfonts übli­cher­wei­se auf cir­ca 30 bis 60 Kilobyte redu­zie­ren. Größere Fontdateien oder zu vie­le Fonts auf einer Webseite kön­nen die Anzeige der Webseite zu sehr ver­lang­sa­men, ins­be­son­de­re auf mobi­len Geräten.

Zwiespältige Zwischenlösung von Firefox

Die meis­ten Browser zei­gen kei­ner­lei Text an, bevor die Webfonts her­un­ter­ge­la­den sind. Bei Firefox wird zwi­schen­zeit­lich ein Systemfont benutzt und der Text dann mit der fer­tig gela­de­nen Webschrift neu umbro­chen. Dies nennt man „flash of unsty­led text“, ein in vie­len Fällen uner­wünsch­ter Effekt, der sich nur durch Tricks umge­hen lässt.


Der mit obi­ger Methode erstell­te Webfont in Safari unter Mac OS X

Im nächsten Teil der Serie lesen Sie:
  • Ausblick – Schrift im Web
(mm),

Ralf Herrmann

Ralf Herrmann hat sich in der Typografie-Szene vor allem als Betreiber der beliebten typografischen Internet-Community Typografie.info einen Namen gemacht. Er ist außerdem Autor typografischer Fachbücher und Herausgeber des Typografie-Magazins TypoJournal. Die neuen Entwicklungen rund um Webfonts dokumentiert er auf der Seite webfonts.info

6 Kommentare

  1. Nicht sehr hilf­rei­cher Artikel.
    Leicht gemach­te Erklärung, kein Wort über die Einbindung son­dern nur über die Konventierung.
    Schade…

  2. fonts­quir­rel-Schriften ver­fü­gen ver­mut­lich nicht über “ß” und Umlaute? Das ist oft ein Problem bei frei ver­wend­ba­ren Schriften, die ja meist von eng­lisch­spra­chi­gen Anbietern stam­men.

    Beste Grüße
    Karin Zick

  3. Ich habe gera­de den Font-Face-Generator mit diver­sen bei Font-Squirrel ange­bo­te­nen Schriften getes­tet. Bei jedem Upload im Experten-Modus bekom­me ich eine Error-Meldung, die lei­der nicht kom­men­tiert ist. Woran mag das lie­gen?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.