Überschriften und Web-Fonts

Traditionell ist man bei der Wahl der Schriftarten für Internetseiten eingeschränkt auf das, was der Benutzer installiert hat. In der Regel fährt man mit einer Auswahl von solchen Listen gut, auch wenn hier mal wieder Linux ignoriert wird ;-)

Das ursprüngliche Design von Kai für diese Website sah in den Überschriften eine "abgerundete" Schriftart vor, die nicht zu den Standardfonts gehört. Natürlich gibt es dafür Lösungen, schließlich hatte Kai dafür schon eine Lösung im Kopf.

Und die lautet sifr. Das ist eine Flash-JavaScript-Kombination, die Überschriften dynamisch durch ein fast beliebig formatiertes Gegenstück mit eigener Schriftart ersetzt, wie man auch schön auf der Website sehen kann.

Haken an der Lösung: Sie erfordert eben den Flash-Player. Und das hat ein paar Nachteile: Erstens kann der Flash-Player auf Linux Nerven kosten. Zwar habe ich selbst seit einiger Zeit gar keine nennenswerten Probleme mehr (auf Ubuntu), aber man muss es ja nicht provozieren.

Zweitens kommt's schlecht, wenn man selbst offene Standards propagiert und dann ohne Not Flash auf seiner Homepage einsetzt - auch noch für etwas "unwichtiges" wie Überschriften. Bei Videos etc. bin ich da nicht so empfindlich - aber es muss ja nicht sein.

Drittens wird das Laden des Flash-Players immer mehr Ressourcen verbrauchen als nötig sind, wenn man sich das sparen kann.

So habe ich schließlich pcdtr gefunden und auch erfolgreich eingebaut. Das lief auch wunderbar - auf meinem Testserver. Auf dem Live-Server (es lag wahrscheinlich an dem PHP 5.1) war es nicht zum Funktionieren zu bewegen - und ich hab einiges ausprobiert. Außerdem beschlich mich dabei noch zusätzlich der Eindruck, dass das Script nicht gut mit den Systemressourcen umgeht. So legt es beispielsweise eine Repräsentation einer CSS-Datei in einer Session-Variablen ab und das Parsen des HTML-Baumes riecht nach Verschwendung von CPU-Zyklen.

Alles in allem: Es musste eine andere Lösung her. Die habe ich jetzt gefunden, und zwar in einem durchaus progressiven Ansatz: Der Einsatz von Web-Fonts zum Runterladen.

Wie das halbwegs browserübergreifend funktioniert, erklärt uns randsco.com. Das Ganze basiert auf dem CSS3-Selektor @font-face. Um maximale Kompatibilität zu erreichen, muss man getrennte Angaben für -- richtig geraten! -- den Internet Explorer und Nicht-IE-Browser machen: In meinem Fall (wie dargestellt) kann die Schrift auch "einfach so" verwendet werden, wenn sie zufällig auf dem System installiert ist. Damit ist die Lösung auch auf eine schöne Art abwärtskompatibel zu den älteren Browsern. "IE6, IE7 and IE8 (...) FireFox 3.5+, Safari (Win & Mac versions) & Opera v10+" sollten laut randsco.com die Lösung mit dem Herunterladen unterstützen - ausgezeichnet!