@font-face die CSS3-Schrifteinbindung im Detail
Veröffentlicht am 17.02.2012 von daniel.ebenberger
CSS3 und dessen neuen Funktionen sind Momentan in aller Munde. Im Rahmen eines Kundenprojektes haben wir uns ausführlich mit der Schrifteinbindung mittels @font-face beschäftigt und möchten Ihnen hilfreiche Hinweise, sowie ein paar Tipps und Tricks für einen reibungslosen Einsatz mit auf den Weg geben.
Was ist @font-face genau?
@font-face ist eine CSS-Anweisung, welche uns erlaubt, nahezu jede beliebige Schriftart zusätzlich zur browsereigenen Schriftendatenbank auf Websites anzuzeigen, ohne dabei auf Bilder oder flashbasierte, kompliziertere Lösungen wie sIFR zurückgreifen zu müssen. Genaugenommen ist diese Regel schon etwas älter, sie wurde bereits bei der Entwicklung von CSS2 vorgestellt und wird von Microsoft´s Internet Explorer seit Version 5 unterstützt (allerdings nicht mit .ttf, sondern .eot Schriftdateien – dazu später mehr). Wie viele andere und nützliche Erweiterungen dieser Zeit, wurde auch diese von den Browserherstellern größtenteils links liegen gelassen und war somit in CSS2 Revision 1 nicht mehr vorhanden. Den “Durchbruch” hatte diese Technik somit also erst wieder in der Entwicklungszeit von CSS3, weshalb heute viele von einem CSS3-Feature sprechen.
Die vereinfachte Einbindung in Websites:
Um eine Schriftart abseits der üblichen Systemfonts auf einer Website anzeigen zu können müssen folgende Kriterien erfüllt sein:
- Eine Internetseite bzw. ein HTML-Dokument mit etwas Text sollte vorliegen. (-klar)
- Eine CSS-Datei bzw. einen Stylesheetabschnitt in entsprechender HTML-Datei wird benötigt.
- Die eigentliche Font-Datei als .ttf (True-Type-Font)
Haben wir alles beisammen können wir mit folgendem CSS-Code die Schriftart auf unserer Website anzeigen lassen:
@font-face {
font-family: “Schriftname”;
src: url(‘schriftname.ttf’);
}
@font-face browserübergreifend verwenden:
Wie inzwischen (leider) schon üblich, wird der oben gezeigte Code bzw. die Art des Dateityps natürlich nicht von allen Browsern unterstützt, weshalb wir uns nun ansehen müssen, was welcher Browser interpretieren kann:
Wie aus der Tabelle abzulesen ist, geht der Trend ganz klar Richtung .ttf und .otf (Open-Type-Font, von Adobe in Zusammenarbeit mit Microsoft entwickelt), jedoch gibt es keinen Dateityp welcher von allen Browsern verstanden wird. Mit nachfolgendem Code ist es möglich nahezu alle Browser anzusprechen und somit die @font-face Schrifteinbindung browserübergreifen zu verwenden.
@font-face {
font-family: ‘schriftname’;
/* IE9 Qirks-Modus */
src: url(‘schriftname.eot’);
/* IE6-IE8 */
src: url(‘schriftname.eot?#iefix’) format(‘embedded-opentype’),
/* IE9 normal + FF 3.5 aufwärts*/
url(‘schriftname.woff’) format(‘woff’),
/* Safari, Android, iOS4.x aufwärts, Opera, Firefox(neue versionen), Chrome (ab Vers. 6), IE10 */
url(‘schriftname.ttf’) format(‘truetype’),
/* iOS 2.x – 4.x */
url(‘schriftname.svg#svgFontName’) format(‘svg’);
}
Was ist außerdem zu beachten:
Ganz wichtig ist es, bei allen Schriftarten, unabhängig davon ob Sie funktionieren oder das richtige Format haben, darauf zu achten, ob diese Schrift auch eingebunden werden darf. Schriften werden im Allgemeinen unter verschiedenen Lizenzen veröffentlicht, welche unterschiedliche Handhabungen erlauben bzw. verbieten. Zum Beispiel dürfen die mitgelieferten Schriftarten von Microsoft´s Office nicht einfach ohne weiteres in Websites integriert werden. Auch ist es möglich sich Schriftarten für die eigene Website bei entsprechenden Anbietern (z.B. Typekit.com oder Fontdeck.com) zu “mieten”
Schriftarten in verschiedene Formate konvertieren:
Um Schriften browserübergreifend verwenden zu können müssen wir, wie zwei Absätze weiter oben beschrieben, verschiedene Fonttypen einbinden. Oftmals werden aber nicht alle Schriftformate der gewünschten Schriftart angeboten und so muss diese nun konvertiert werden. Abhilfe schaffen hier zahlreiche Online-Konverter wie z.B. der @font-face Generator von Fontsquirrel.com:
Die Schrift wird hier in einem beliebigen Format hochgeladen und anschließend in alle möglichen anderen Formate konvertiert. Anschließend erhält man eine Zip-Datei in welcher alle Dateitypen sowie eine Demoseite enthalten ist.
Schriftdatenbanken:
Nachdem wir die technische Seite ausführlich beleuchtet haben, brauchen wir nur noch die passende Font. Abschließend eine kurze Liste mit Schriftdatenbanken, welche kostenlose und meist lizenzfreie Schriftarten zum Download anbieten: