Als Webentwickler kennt man das Problem mit kommerziellen Schriftarten, die aus dem Corporate Design stammen, aber nicht als Webfont zur Verfügung stehen. Beliebt sind dafür immer verschiedenste Formen des Image-Replacements. Die Nachteile davon liegen auf der Hand:
- Keine optimale Suchmaschinerkennung
- Hoher Änderungs- und Verwaltungsaufwand
- Text nicht kopierbar
- Problem der Barrierefreiheit
Neben der Bilderlösung dürfte sIFR eine bekannte Methode sein. Hier wird der Text aus einem bestimmten HTML-Tag gelesen und durch einen Flashfilm mit eingebettem Font ersetzt. In der Theorie gut, in der Praxis schwierig wegen eines enorm hohen Konfigurationsaufwands.
Nach dem gleichen Prinzip funktioniert das js-Plugin Typeface. Nur ist es etwas praktischer in der Handhabung.
Der folgende Code bindet einen normalen Font und einen später beschriebenen Bold-Font ein:
1 2 3 | <script src="typeface-0.14.js"><!--mce:0--></script> <script src="mysrcFont.typeface.js"><!--mce:1--></script> <script src="mysrcFontBold.typeface.js"><!--mce:2--></script> |
Um dem Text die entsprechende Schriftart zuzuweißen, benutzt man einfach die CSS Anweisung font-family.
1 2 | <div id="text" style="font-family: mySrc Font;"> Lorum ipsolum...</div> |
Den Namen des im syle-Attribut verwendeten Fonts kann man in den jeweiligen js-Dateien nachlesen.
Das Ganze hat zwei Nachteile, wie sie auch schon auf der Website beschrieben werden. Performanceprobleme bei größeren Textmengen und Standard-CSS Hovereffekte funktionieren nicht mehr.
Damit der Font in eine Javascript Datei umgewandelt werden muss er in einem Truetype oder Opentype Format vorliegen. Nicht immer ist bei diesen Schriften auch die fette Variante integriert. Um das in den Griff zu bekommen, kann man mit einem Font Bearbeitungstool nur die Bold-Variante exportieren und diese ebenfalls umwandeln. Bindet man nun diese beide JS-Dateien ein und weist die Bold-Schrift einem einem HTML-Element zu, passiert abgesehen von einer Fehlerausgabe in der Firebug Konsole nichts.
Die Lösung dafür ist ganz einfach. Der Font-Converter auf der Typeface Website integriert auch Informationen über Schriftschnitte weshalb der CSS-Selektor diese Info auch benötigt:
1 2 3 4 5 6 7 8 | #text{ font-family: mySrc Font, Verdana, Arial; } #boldFont{ font-family: mySrc Boldfont, Verdana, Arial; font-weight: bold; } |
Damit ist der Workaround für die Einbettung von normalen und bold Schriften perfekt.
Cufón – Eine Javascript alternative zu sIFR
sIFR 3 r436 – scroll-Problem im Firefox 3, ie6/7
