Fonts in Webseiten einbetten

aus Typografie.info TypoWiki, der freien Wissensdatenbank

Im Gegensatz den zu Druckvorlagen von Grafikdesignern können Webdesigner das Layout einer Webseite nie hundertprozentig kontrollieren. Besonders die zu verwendenden Fonts lassen sich über den HTML-Standard allenfalls vorschlagen. Der Browser des Benutzers sucht bei der Anzeige der Webseite die vorgeschlagenen Fonts auf dem System und greift im schlimmsten Fall auf einen beliebigen Ersatzfont zurück. Während für Fließtexte dieser Rückgriff auf die typischen Systemfonts aus Gründen der optimalen Lesbarkeit sogar hilfreich sein kann, wünschen sich Webdesigner für Überschriften in der Regel besondere Fonts, zum Beispiel die Hausschrift des betreffenden Unternehmens. Um dies zu Erreichen muss man die Überschriften mühsam in einem Bildbearbeitungsprogramm (wie zum Beispiel Photoshop) in eine Grafik wandeln, und diese in die Webseite einbetten. Dies hat neben dem hohen Aufwand und der schlechten Aktualisierbarkeit auch den Nachteil, dass der dargestellte Text so weder in die Zwischenablage kopiert werden kann, noch lässt er sich von Suchmaschine indizieren. Nachfolgend werden Möglichkeiten aufgezeigt, wie Texte auf Webseiten in Fonts angezeigt werden können, die nicht auf dem System des Benutzers vorhanden sind.

Dynamische Überschriften mittels Flash

Ein neuer Ansatz, der unabhängig vom verwendeten Browser funktioniert ist sIFR (http://www.mikeindustries.com/sifr/). Diese Technologie ersetzt die Inhalte beliebiger CSS-Selektoren (zum Beispiel <h2>) über JavaScript mit Flash-Filmen, die den betreffenden Text dann mit einem vom Webdesigner definierbaren Font anzeigen. Die Webseite lässt sich also wie jede anderen Webseite bearbeiten und benutzen. Aktualisierungen oder die dynamische Erstellung der Texte über Content-Management-Systeme stellt daher kein Problem dar. Wenn die nötigen Technologien (Flash und JavaScript) nicht verfügbar sind, erfolgt die Anzeige auf herkömmlich Weise. Nachteile: Die Texte in den Flash-Filmen lassen sich zwar markieren, aber nicht zusammen mit dem restlichen Text. Zudem erfolgt die Anzeige der Flash-Texte deutlich später als die normalen HTML-Texte.

Textersetzung über dynamische Grafiken

Einen ähnlichen Ansatz wie sIFR verfolgt die Methode Dynamic Text Replacement (http://www.alistapart.com/articles/dynatext/). Auch hier werden über CSS-Selektoren bestimmte Texte bei der Anzeige durch JavaScript ausgetauscht – diesmal aber nicht durch Flash-Filme, sondern durch Grafiken im PNG-Format. Die Anzeige setzt also keinen installierten Flashplayer voraus. Die nötigen Grafiken werden über PHP und die Grafikbibliothek GD Library dynamisch erstellt. Der dabei zu verwendende Font im TrueType- oder OpenType-Format wird dazu einfach auf den Server geladen. Um die Texte auch mehrzeilig und mit beliebigen Umbrüchen zu setzen, können für alle Wörter automatisch einzelne Grafiken erzeugt werden. Das Skript legt die erstellten Grafiken in einem Cache-Verzeichnis ab. So wird die Rechenzeit des Servers nicht unnötig belastet und die Anzeige der Webseite beschleunigt. Wie bei der sIFR-Technologie besteht aber auch hier das Problem, dass die so erstellten Texte erst deutlich verzögert angezeigt werden und nicht zusammen mit den restlichen Texten markierbar sind.

Web Fonts (bisher nur im Safari nutzbar)

Mit dem CSS3 Modul Web Fonts (http://www.w3.org/TR/css3-webfonts/) hat das World Wide Web Consortium die Grundlage für eine kleine Revolution im Bereich der Webtypografie geschaffen. In Zukunft soll es nur durch den Einsatz von CSS möglich sein beliebige Fonts auf Webseiten einzusetzten. Hierzu wurde die @font-face Regel (http://tobias-otte.de/essays/web-fonts/#font-face) erarbeitet. Mit dieser lassen sich der Schriftdatenbank im verwendeten Browser Fonts hinzufügen welche dann wie gewohnt in den CSS Angaben verwendet werden können. Das Team rund um Apples Browser Safari hat im März 2008 als erster Browserhersteller die Regel in seinen Browser eingebaut.

Da die Arbeit am Web Fonts Modul noch nicht abgeschlossen, die Umsetzung noch fehlerbehaftet (http://tobias-otte.de/2008/04/safari-und-fontface-wie-viel-k/) und der Safari kaum verbreitet ist sollte der Einsatz der @font-face Regel momentan höchstens als Zusatz zu anderen Möglichkeiten gesehen werden.

Microsoft WEFT (veraltet)

Microsoft hat mit WEFT (http://www.microsoft.com/typography/web/embedding/weft3/) (Web Embedding Fonts Tool) ein Tool entwickelt, um beliebige Fonts in Webseiten einzubetten. Dazu wandelt das Programm den Font in ein spezielles Format (.EOT), das die benutzten Zeichen des Fonts enthält. Diese Fontdatei wird auf den Server geladen und bei der Anzeige der Webseite benutzt. Der entscheidende Nachteil dieser Technologie liegt darin, dass die Anzeige lediglich im Internet Explorer funktioniert. Alle anderen Browser ignorieren die WEFT-Technologie.

Bitstream TrueDoc (veraltet)

Die von Bitstream entwickelte TrueDoc-Technologie zur Schriftdarstellung in elektronischen Dokumenten lässt sich prinzipiell auch im Internet verwenden. Wie bei der WEFT-Technik werden auch für TrueDoc die Fonts mittels einer kostenpflichtigen Entwickler-Software in ein spezielles Format gewandelt (.PFR für Portable Font Resource) und auf den Server geladen. Da die TrueDoc-Fonts lediglich von Netscape-Browser ab Version 4.x standardmäßig unterstützt werden, hat sich die Technologie ebenso wie WEFT nicht durchgesetzt. Der Support und der Verkauf der Software wurden eingestellt.