Schriftarten in Webseiten

Das Design des Grafikers ist fertig und alles ist abgestimmt. Einzig: wenn man die Seite fertig kodiert hat, stellt man fest, dass die Schriftarten ein wesentlicher Bestandteil des Designs sind und das Gesamtbild nicht mehr stimmt. Es gibt Abhilfe, wenn auch schwache.

evor wir uns in die Lösungs-Findung stürzen, erstmal einige Anmerkunden. Die hier dargestellte Lösung wird wegen der Benutzung des CSS-Attributs @font seit CSS 2.1 nicht mehr offiziell unterstützt. Firefox 3.0.7 und IE 6, 7 und 8 unterstützen es aber derzeit noch. Firefox ist hierbei wohl eher aus Versehen vertreten, denn der Standard selbst stamm von Microsoft. Deshalb sollten die genutzten Schriften immer so verwendet werden, dass ein Web-Browser zur Not auch angewiesen wird, auf eine bestimmte Alternative, die definitiv da sein sollte, auszuweiche. Wichtig ist auch, dass Schriftarten, wie Bilder auch, Lizenzen unterliegen können! Also Vorsicht bei der Nutzung der Schriften.

Wer also an standard-konformen Webseiten interessiert ist, sollte dieses HowTo nicht weiter verfolgen und im Notfall zu anderen Techniken greifen. Die einzige mir bekannte Alternative ist die Nutzung von Flash oder Silverlight bzw. das Darstellen der betreffenden Inhalte per Bild.

Das Grundproblem ist also, dem Browser zu vermitteln, nicht eine der Pseudo-Schriftarten zu verwenden bzw. auf diese zurück zu fallen, wenn eine definierte Schriftart nicht auf dem System vorhanden ist, auf dem der Browser des Besuchers läuft. Es gibt abertausende von verschiedenen Schriftarten gruppiert in diversen Familien. Natürlich kann nicht jeder Rechner der Welt jede Schriftart installiert haben, genauso wenig, wie jeder Rechner jedes Bild der Welt vorrätig haben kann.

Für das Problem der Bilder gibt es eine recht einfache Lösung: Das Bild ist auf dem Web-Server vorhanden und kann per src-Attribut des img-Tags eingebunden werden:

<img src="bilder/pic01.png" alt="pic" />

Fertig! Was aber kann man standardmäßig mit Schriften tun? Folgendes geht schon einmal nicht:

<p style="font-fact:Porsche">Dies ist in Porsche-Schrift geschrieben!</p>

Auf dem eigenen Rechner, auf dem diese Schrift vielleicht vorhanden ist, funktioniert alles wunderbar, denn der Browser kann die Schrift finden und verwendet sie zum Anzeigen. Besucht man seine Website aber über einen anderen Rechner, fällt der Browser in die System-Standard-Schriften zurück und das Layout ist im Zweifel vernichtet.

Eine Alternative kann auch nicht gelten:

<p style="font-face:Porsche;font-src:www.page.xx/font.ttf">Das ist in ...</p>

Die Lösung: Font-Einbindung per CSS und EOT-Dateien

Es gibt einen (früher standardisierten) Weg zur Schriftarten-Nutzung in Webseiten, auch wenn die Dokumentationen hier nicht wirklich über einen hereinbrechen, um es gelinde auszudrücken.

Das ganze läuft über die Nutzung von Fonts ab, die in das sog. Embedded OpenType Format (EOT) konvertiert wurden. Der entsprechende Standard wurde von Microsoft entwickelt und beim W3C als Standardisierungs-Vorschlag eingereicht (siehe W3C-Seite). So richtig gut scheint das nicht geklappt zu haben. Schade eigentlich, denn die Nutzung ist an sich wirklich simpel und läuft direkt über CSS ab. Es gab damals auch eine Gegenbewegung über die Firma Bitstream und deren TrueDoc-Format, das eher über den Netscape Navigator kam, aber egal.

Schriftarten-Designer können ihren Fonts ein NoEmbedding-Tag hinzufügen, sodass WEFT sie nicht in EOT transformieren kann. Man muß es halt probieren!

Microsofts Typography Group (Homepage) (ja, die gibt es wirklich!) stellt für alle interessierten ein Tool bereit, mit dem die wichtigsten und schwierigsten Arbeiten hierzu weitgehend automatisiert durchgeführt werden können – das Web Embedding Fonts Tool, kurz WEFT. Weft liegt derzeit in Version 5.3.2 vor und ist nicht mehr ganz so taufrisch. Offiziell kann es nur bis Windows 2000 installiert werden, es läuft aber einigermaßen sauber auch unter XP und Vista. Meine Windows 7 Beta Installation funktionierte wunderbar im Gegensatz zu Windows XP SP3. Zu dem dort aufgetretenen Fehler später mehr.

Installation von WEFT

WEFT kommt als altbackene Win32-Setup-Exe daher. Nach dem Start der Installations-Datei und der Bestätigung einer Sicherheits-Abfrage muß man einen Hinweis des Programmes ignorieren, der noch aus den Zeiten stammt, in denen Programme sich gegenseitig blockierten. Wenn man nun noch die Lizens-Bestimmungen abgenickt hat, darf man einen Namen und eine Firma angeben und sich seine neue Serien-Nummer ansehen (wird im weiteren nicht wirklich benötigt).

Nach der obligatorischen Definition des Ziel-Pfades für die Installtion kann man im Dialog Components den Haken bei „Fonts (Tahoma)“ entfernen, denn die Schrift sollte heute jeder Rechner installiert haben (war damals die neue Standard-Font von MS, so ähnlich, wie heute Calibri oder Consolas). Ein Klick auf „Finish“ startet die Prozedur und 10 Sekunden später sieht man das Startmenu und erhält eine Erfolgsmeldung.

WEFT nutzen

WEFT ist projektbasiert aufgebaut. Pro Webseite möchte WEFT gern ein Projekt anlegen. Das ist aber für das Feature, das wir nutzen wollen so nicht nötig. Beim ersten Start würde das Tool gern seine Schrift-Datenbank mit der des Systems abgleichen, was auf einem XP-Rechner zum sofortigen Absturz führte, auf einem anderen hingegen gelang. Dies ist wohl dem Altersgrad des Programms geschuldet. Bekommt man den Font-DB-Assistenten partout nicht zum Laufen, sollte man es entweder über eine virtuelle Maschine mit Windows XP ohne SP versuchen oder an dieser Stelle aus dem HowTo aussteigen, denn das wars. WEFT kann nur mit in seine Datenbank importierte Fonts arbeiten.

Wie bereits erwähnt, arbeitet WEFT immer projekt-basiert. Im Sinne von WEFT heißt dies auf einer Website. Jedes WEFT-Projekt beginnt daher erstmal mit der Abfrage von einem Namen und einer Mail. Meine Lieblings-Einstellungen „Fox Moulder“ und „f.moulder@fbi.gov“ haben hier mal wieder gute Arbeit geleistet :-).

weft01

Im nächsten Schritt möchte der Assistent gern eine Ziel-Internetseite wissen. Hintergrund ist der, dass das Tool versucht, auf dieser Seite bereits genutzte Schriftarten (CSS) zu identifizieren und in das Projekt einzubinden. Manche Seiten funktionieren hier nicht wirklich, sodass ich nur den Tipp geben kann, einfach immer „www.ende.de“ einzugeben. Das ist eine meiner Lieblingsseiten und ist so einfach gestrickt, dass nicht gleich komplette Hierarchien von WEFT geladen werden müssen. Nebenbei bemerkt ist www.ende.de immer wieder einen Besuch wert :-).

weft02

Letztlich kommt ein Bestätigungs-Dialog, auf dem beruhigt „Skip analysis“ auswählen kann, um längeren und unnötigen Prozessen zu entkommen.

Jetzt kann die eigentliche Arbeit mit dem Programm beginnen, denn alles, was wir tun wollen, ist eine EOT-Datei aus einer TTF zu erstellen. Also los!

EOT-Datei erstellen

Das nächste Fenster des Assistenten ist bereits das interessanteste. Hier, im Dialog „Fonts to Embed“, können nun beliebig viele Fonts über die „Add“-Schaltfäche hinzugefügt werden. In dem ListView ist die Spalte „Embed“ ganz interessant. Sie zeigt an, welche Fonts als EOT-Dateien exportiert werden sollen. In meinem Fall soll dies nur die neu definerte Font „Calibri“ sein:

weft03

alibri ist der einzige Eintrag, der in der Spalte „Embed“ den Wert „Yes“ hat. Erreichen kann man dies durch Selektion einer Schrift und Klick auf „Don’t embed“ bzw. „Embed“.

Wenn man alle Schriftarten definiert hat und auf „Weiter“ klickt, gelangt man in einen weiteren Dialog, der in meinem Fall mit Werten zu www.ende.de gefüllt ist und der mich nicht weiter interessiert. Ich belasse alle Einstellungen, wie sie sind und hake nur unten „Show CSS @font-family declarations“ an, da dies später ungemein bei der Einbindung hilft:

weft04

Nach einem Klick auf Weiter soll man nun einen URI für die neue EOT-Datei angeben. WEFT will unbedingt im Web speichern, aber die manuelle Eingabe eines Pfades auf dem Rechner reicht absolut aus:

weft05

Nach einem Klick auf „OK“ möchte WEFT noch Benutzer und Kennwort der Ablagestelle wissen, da es ja davon ausgeht, man würde nun einen Upload starten. Hier gibt man nun einfach den Windows-Benutzer und sein Kennwort ein. Durch das vorherige Auswählen der CSS-Anzeige-Option wird nun ein Fenster ähnlich wie dieses gezeigt:

weft06

Nun wird auch klar, wofür die ganzen persönlichen Infos gedacht waren: Microsoft-typisch als Copyright-Vermerke :-). Aber egal. In dem Ordner sollte nun eine EOT-Datei liegen und den Inhalt des Fensters kopert man in die Zwischenablage.

EOT-Datei in Website nutzen

Zu guter letzt soll nun natürlich auch eine Website per CSS mit der Schriftart formatiert werden. Man erstellt einen Ordner (ich nenne ihn „EOT-Test“) in einem beliebigen Verzeichnis und kopiert dort die EOT-Datei hinein. Jetzt wird eine neue Datei mit dem Namen „index.htm“ erstellt und folgender Code (z.B. über das Notepad) eingefügt:

<html>
  <head>
    <style type="text/css">
      <!--
        @font-face
        {
    	  font-family: Calibri;
    	  font-style:  normal;
   	  font-weight: normal;
    	  src: url(www.mydomain.de/fonts/calibri0.eot);
        }

        .CalibriFont
        {
          font-face: Calibri, Arial, Sans-Serif;
        }
      -->
    </style>
  </head>
  <body>
    <h1 class="CalibriFont">Überschrift</h1>
    <p class="CalibriFont">Text</p>
  </body>
</html>

Interessant ist vor allem der Block von Zeile 5 bis 11. Zunächst kommt die @face-Direktive zum Einsatz, die offiziell gar nicht mehr Bestandteil von CSS ist, aber noch weitgehend unterstützt wird. Wie lange das noch so geht, weiß wohl niemand. Diese Direktive macht allen folgenden CSS-Anweisungen eine neue Schriftfamilie namens „Calibri“ bekannt, die normal darstellt werden kann und deren typografische Definition an der bei src angegeben Stelle zu finden ist. Nicht umsonst habe ich hier einen URL verwendet, da es sich anbietet, absolute Internet-Adressen zu verwenden, um Verwechslungen oder Browser-Problemen vorzubeugen.

Damit das obige Beispiel funktioniert, müsste man Zugangsdaten für die Adresse www.mydomain.de besitzen und dort per FTP-Programm einen Ordner „fonts“ anlegen und dort hinein die EOT-Datei übertragen. Achtung: Man sollte die EOT-Datei vorher in Klein-Buchstaben-Notierung umbenennen, um Problemen bei den meist Unix-basierten Hoster-Maschinen vorzubeugen.

Der Rest ist Kinderkram. In den Zeilen 13 – 16 definiert man eine CSS-Klasse, die später versuchen wird, Calibri zu laden. Ist dies nicht möglich, kommt Arial zum Einsatz und wenn auch das fehlschlägt (bei Linux heißt z.B. Arial anders, nämlich Helvetica, was auch der Original-Name von Arial ist ;-)), dann wird eine serifen-lose Schriftart (also eine ohne Schnörkel an den Buchstaben-Enden) genutzt.

Das wars auch schon! Eine so gestaltete Seite sollte ohne Probleme auf den meisten aktuellen Browsern laufen.

Auf das Posting eines Beispiel-Projektes verzichte ich aufgrund des relativ einfachen Inhaltes und der lizenzrechtlichen Probleme, die mit Schriften so einhergehen. Deshalb noch einmal meine Warnung an alle an der EOT-Technik Interessierten: Bitte vor Benutzung sicherstellen, dass eine TTF-Datei auch wirklich unbedenklich ins Web gebracht werden kann und die Nachweise dafür irgendwo aufheben. Abmahnungen in dieser Richtung gehen gleich richtig ins Geld!

Meinung

Ich poste hier diesen Artikel gegen meine sonstigen Mahnungen, sich an Standards zu halten. Ich bin selbst hin und her gerissen, mach das aber hauptsächlich deshalb, um ganz verzweifelten Leuten die Möglichkeit zu geben, statt eines Flash-Monsters eine einfache HTML-Seite zu generieren. Mit Silverlight und WPF und der Annäherung der beiden aneinander wächst vielleicht endlich eine Alternative zu Flash heran. Ich habe nichts gegen das Adobe-Produkt, werde aber als einer, der aus der Coding-Richtung kommt von der lächerlichen Programmier-Unterstützung abgeschreckt. Das hier ist keine Alternative zu Flash, kann aber in einigen Fällen dafür sorgen, dass jemand vielleicht darauf verzichtet.

Abschluss

Ich finde den MS-Ansatz gar nicht so übel, zumal WEFT CSS mit ins Boot holt. Ich schätze, das ganze ist an politischen Hürden gescheitert. Fakt ist jedenfalls, das im Jahre 2009 in Zeiten von Web 2.0, AJAX und Google-Anwendungen kein Mensch einen Plan hat, wie ich meine Webseite mit Schriften versehen kann, die mir gefallen. Eigentlich ein Hammer! Für ganz wichtige Zwecke kann die hier vorgestellte Lösung vielleicht eine kleine Hilfe sein.

Schreibe einen Kommentar

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

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.