Mit HTML5 beliebige Fonts verwenden

Die meisten Webdesigner kennen das Problem: Man möchte in seinem Webdesign andere Schriftarten als Arial, Verdana und Times New Roman einsetzen, doch konnte dies bislang nicht kompromisslos tun. Voraussetzung dafür war, dass der Besucher der Webseite die verwendete Schriftart auf seinem Rechner installiert hatte. In der Regel behalf man sich mit JavaScript-Lösungen wie Cufon und nahm dabei in Kauf, dass die Texte mit der individuellen Schriftart als Bilder generiert wurden.

Das Ganze geht dank CSS3 aber auch viel einfacher. Mittels @font-face lassen sich neue Schriftarten definieren und an der gewünschten Stelle dann mit font-family verwenden. Normalerweise würde ich jetzt den Quellcode posten und genau erklären, wie man eigene Schriftarten mit CSS3 einbinden kann. Dazu habe ich jedoch ein sehr schönes Tool gefunden, den so genannten Font-Face Generator, der Font-Dateien in viele andere Font-Formate konvertiert und einem auch gleich einen Beispielcode zum einbinden des Font generiert.

Der Font-Face Generator
Der Font-Face Generator macht einem das Leben hier wesentlich leichter. Man sucht sich einfach die gewünschte Font-Datei (z.B. im Internet, bitte auf die Lizenzbestimmungen achten!), lädt diese im Font-Face Generator hoch und lässt sich dann das @font-face Kit generieren. Darin enthalten ist das Font in verschiedenen Formaten (TTF, EOT, WOFF, SVG, SVGZ) und Beispiel-CSS und HTML-Code. Dank der verschiedenen Font-Formate erreicht man eine hohe Cross-Browser Funktionalität. Die so eingebundenen Fonts funktionieren in allen einigermaßen aktuellen Browsern (IE, Firefox, Chrome, Opera, Safari) und die Schriften werden nicht als Bilder, sondern wie jeder andere Text auch dargestellt. Man kann ihn sich also vorlesen lassen oder auch markieren und kopieren, was beides bei JavaScript-Lösungen wie Cufon nicht möglich ist.