Für den design Blog habe ich eine Technik verwendet mit der man jeden beliebigen Schrifttyp (Font) auf einer Web Seite verwenden kann. Zwar ist der Aufwand der Implementierung durchaus nicht gering, jedoch überwiegen deutlich die Vorteile. So ergeben sich keine Nachteile für Suchmaschinenoptimierung noch für die Lesbarkeit der Seite.
Hintergrund: Schrifttypen und das Internet
Der Bedarf an individuellen Fonts für Web Seiten ist groß. Von Vorgaben durch das Corporate Design für Firmenpräsentationen bis hin zu originellen Web Seiten.
Derzeit verhält es sich jedoch so, dass Browser nur die Schrifttypen darstellen können, die auf dem Rechner des Nutzers bereits installiert sind. Im allgemeinen sagt man, das es ungefähr 10 "sichere" Fonts gibt, d.h. deren gesicherte Verbreitung liegt bei über 90%.
Darunter sind:
- Arial
- Verdana
- Georgia
- Trebuchet MS
- Comic Sans MS
- Courier New
- Tahoma
- Impact
Bisherige Lösung: Schrifttypen durch Grafiken
Eine oft verwendete Technik ist das Erstellen einer Grafik mit dem gewünschten Font und deren Einbinden in die Web Seite.
Massiver Nachteil ist unter anderem die Tatsache, dass Suchmaschinen Texte aus Grafiken nicht durchsuchen können, und somit der gewünschte Inhalt nicht indeziert und somit auch nicht gefunden wird. Ein weiterer Nachteil ist der Umstand, dass Grafiken die Größe der Web Seite erhöhen und somit die Ladezeit verlängern (siehe vor allem auch Mobile Geräte). Darüber hinaus wird der Inhalt beim Ausschalten von Bildern oder bei screen readern überhaupt nicht dargestellt.
Auftritt sIFR: So funktioniert es
Die Technik von sIFR (scalable Inman Flash Replacement) beruht auf mehreren sehr intelligenten Schritten:
- Der Designer fertigt die Seite ganz normal an. Er erstellt die Überschriften mit den verfügbaren Fonts.
- Zunächst wird festgestellt, ob der Nutzer über ein Flash Plug-in verfügt. (Sollte er Flash nicht installiert haben, wird die Seite ganz normal dargestellt, s.o.)
- Daraufhin wird der Text den man ausgewählt über mit Hilfe Javascript und css versteckt.
- Als nächstes erzeugt Flash ein statisches Video in dem der gewünschte Font in der gewünschten Farbe und Größe dargestellt wird.
Im html-code verändert sich nichts. D.h. Suchmaschinen können ihn indezieren und zu den Suchergebnissen hinzufügen.
Auwand der Implentierung
Wie oben schon erwähnt ist der Aufwand der Implementierung nicht ganz ohne.
- Zunächst lädt man sich die notwendigen Dateien von der sIFR-Seite herunter und bindet sie in sein Projekt ein.
- Dann muss ein Flash-Video mit dem gewünschten Font erstellt werden. Dazu verwendet man entweder Adobe Flash oder den FontEmbedder.
- Als nächstes fügt man einige Zeilen Javascript ins html ein.
- Als letztes werden noch Größe und Farbe im css angepasst.
Der wirklich komplizierte Teil sind die Anpassungen der Größe und Farbe im Css und zum Teil im Javascript. Hier kommt ohne Trial und Error fast nicht aus. Das Ergebnis lässt sich dafür aber auch durchaus sehen.
Ein gutes Video Tutorial hat Danilo Celic aufgezeichnet. Es zeigt alle wesentlichen Schritte zur Umsetzung der sIFR Technik.
Darüber hinaus gibt ein Wiki mit ausführlichen Erklärungen.
Anwendungsbereiche von sIFR
Primär würde ich empfehlen, sIFR für Überschriften und Logo/Tagline zu verwenden. Dies liegt daran, dass für die Erzeugung der Flash-Videos eine gewisse (kurze) Zeit benötigt wird, und je mehr Text gerendert werden muss, desto länger dauert es. Für große Textblöcke würde ich daher weiterhin die normalen Web-Fonts verwenden.
Weiterführende Links
Update: Bei wakeuplater.com findet man eine hilfreiche Schritt-für-Schritt Anleitung zur Implementierung von sIFR.