Pixelfans

Webfonts mit @font-face

Nach jahrelangen Ankündigungen scheint es jetzt wirklich wahr zu werden, dass man im Seitenlayout für das Web nicht auf verbreitete Schriften angewiesen ist oder für Überschriften diverese Imagereplacementtechniken nutzen muss (auch wenn da clevere Varianten entwickelt worden sind).

Die naheliegende Idee Browser auch Schriftarten anzeigen zu lassen, die nicht auf dem Zielrechner installiert, hört sich sehr naheliegend an. Während des Browserkrieges setzten Netscape und Microsoft (natürlich) auf unterschiedliche Techniken, die aber beide verhindern sollten, dass die Schrift auch ohne erworbene Rechte auf anderen Websites eingesetzt werden konnten.

Microsoft stellt immer noch ein kostenloses Tool zur Verfügung des True Types in sogenannte Embedded Open Types konvertiert. Damit wird die Schriftart komprimiert und gezielt für eine Website erzeugt. Mit einem Editor sieht man gut, was gemeint ist. Das schützt die Urheberrechte nicht besonders und für die Erstellung braucht man ein Microsoft-Betriebsssystem, auch wenn es eine kleine Onlinelösung gibt. Der Vorteil ist, das vom IE4 bis zum IE7 IE8 (ab Beta2) diese Fonts verwendbar sind.

Wahrscheinlich ist der Acid3-Test daran “schuld”, das die CSS3-Empfehlung @font-face in Opera 10 Alpha, Firefox 3.1 beta 2 und im Safari umgesetzt sind. Leider funktioniert diese mit Open Type Fonts nicht in jedem Fall. Wenn man sich den Acid3-Test näher ansieht, sieht man folgende Anweisung:

@font-face { font-family: "AcidAhemTest"; src: url(font.ttf); }

True Types funktionieren also in jedem Fall, auf allen Browsern, die den Acid3 bestehen.

Wir haben uns bei Pxelfans für die schöne Schriftart Delicious für den Fließtext entschiedem und sind zumindest auf den oben beschriebenen Browsern zu ähnlichen Ergebnissen kommen.
Dazu haben wir mittels FontForge und einem kleinen Script, welches wir im Netz gefunden haben,

#!/usr/local/bin/fontforge
# Quick and dirty hack: converts a font to truetype (.ttf)
# type fontforge -script otf2ttf.sh FONTNAME.otf 
Print(“Opening “+$1);
Open($1);
Print(“Saving “+$1:r+“.ttf”);
Generate($1:r+“.ttf”);
Quit(0); 

die entsprechenden Dateien in True Types konvertiert. Das war für die Erstellung von *.eot’s ohnehin nötig. So sieht jetzt diese Seite mit Safari aus:

Hier noch ein paar nützliche Links, die uns geholfen haben:

• @font-face in IE: Making Web Fonts Work
• Fonts available for @font-face embedding
• Web Fonts - @font-face im Einsatz

Spannend für die mögliche zukünftige Entwicklung ist sicher auch dieser Text.
Insgesamt kann man die neuen Möglichkeiten gut verwenden, wenn man einige passende Alternativschriften in der font-family definiert.
Um ähnliche Schriften zu finden, kann IdentityFont gute Anhaltspunkte bieten.

Nachtrag:

Es gibt auch einen Onlinekonverter für Schriften.

geschrieben von Pawel

---

Kommentare

Kommentar verfassen

Name:

Email:

Location:

URL:

Persönliche Einstellungen speichern?

Benachrichtigen, wenn es Folgekommentare gibt?