CSS: @font-face im Praxistest
Zu einem individuellem Layout gehört in den meisten Fällen auch eine individuelle Schriftart. Doch was tun, wenn diese allzu exotisch ist und es keine Hoffnung gibt, das sie jemals flächendeckend als Systemschrift installiert ist? Die CSS-Eigenschaft @font-face
hilft hier weiter.
Bereits seit CSS2 gehört @font-face
zum Standard. Aufgrund mangelnder Unterstützung seitens der Browser-Entwickler, mit Ausnahme des Microsoftschen Browsers, wurde die Eigenschaft in Version 2.1 jedoch wieder aus dem Standard herausgenommen. Umso mehr erfreut es mich jetzt natürlich, das ein breites Umdenken statt gefunden hat und @font-face
in CSS3 ein Comeback feiert.
So gut wie alle modernen Browser unterstützen die Eigenschaft:
- Internet Explorer (getestet mit 7 und 8)
- Chrome (getestet mit 8)
- Firefox (getestet mit 3.5, 3.6 und 4.0b)
- Opera (getestet mit 11.0)
- Safari (getestet mit 5.0)
Und in der Praxis?
Das Einbinden einer Schrift ist denkbar einfach. Über die Deklaration
/* Beispielhafte Einbindung der Schriftart Electronic Highway Sign */
@font-face {
font-family:"Electronic Highway";
src:url(../pfad/zur/schriftdatei/electronic.ttf) format("truetype");
font-weight:normal;
font-style:normal
}
wird die Schriftart definiert. Mit der Angabe font-family
wird der Name festgelegt, mit src:url(...)
der Pfad zur Datei angegeben. Beides sind Pflichtangaben und müssen gesetzt werden. Die Angaben zum Schriftgewicht und -stil sind optional. Als Formate können Schriftdateien in Truetype oder Opentype definiert werden.
Schlussendlich weist man die neu definierte Schrift nur noch auf dem gewohnten Weg per Selektor zu, z.B.:
h1, h2, h3, h4, h5, h6 { font-family:"Electronic Highway" }
Browsereigenheiten
Der Internet Explorer nutzt ein eigenes Dateiformat mit der Endung .eot. Diese Eigensinnigkeit ist ja nichts neues. Zum Glück gibt es freie Konvertierungstools. Eines davon ist der web-basierte Dienst von kirsle.net, der ein Umwandeln ohne Software ermöglicht. Microsoft selber stellt mit dem Web Embedding Fonts Tool (WEFT) eine Software zum kostenlosen Konvertieren in .eot bereit.
Durch eine Browserweiche, z.B. mittels Conditional Comments, muss die Schrift für den IE gesondert angegeben werden:
<!--[if IE]><link rel="stylesheet" type="text/css" href="pfad/zu/css/iehacks.css" /><![endif]-->
@font-face {
font-family:"Electronic Highway";
src:url(../pfad/zur/schriftdatei/electronic.eot);
font-weight:normal;
font-style:normal
}
Ob der IE 9 neben .eot auch .ttf oder .otf unterstützt, kann ich zurzeit nicht sagen.
Was mich ein wenig überraschte, war der Firefox, der sich als ziemlich stur heraus stelle. So gibt es die Beschränkung, dass die Schriftdatei von der gleichen Domain geladen werden muss. Begründet wird dieser Umstand, das TrueType oder OpenType keine fest definierten MIME-Types haben.
Die Gecko-Browser verweigern ebenfalls die Anzeige bei korrupten Schriftdateien mit einer invaliden CMAP-Tabelle. Bei einem Test, in dem ich mehrere Schriftarten von dafont.com ausprobierte, gab es relativ viele davon. Wie man das überprüfen kann, kann ich nicht sagen. Hier hilft anscheinend nur das Prinzip „trial and error“.
Update: Ein komplettes Konvertierungstool für alle Formate stellt Font Squirrel mit dem @font-face Generator kostenfrei zur Verfügung. Dort findet ihr auch eine recht stattliche Anzahl an frei verfügbaren Schriften.
Vielen Dank an Dieter M. für den Tipp!
@ Matthias:
hmm… Ein Ansatz wäre, die Definition der Schrift aus der CSS-Datei raus zu nehmen und direkt in die Seite in einen style einzubetten. Dort könntest du dann z.B. mit Base64 kodieren. Das ist zwar keine 100%-ige Lösung, aber es erschwert den Zugriff auf die Schrift schon ein wenig.
Vielleicht hilft dir folgender (schon etwas älterer) Artikel von Dr. Web für den Einstieg:
http://www.drweb.de/magazin/codieren-und-verschlusseln-mit-javascript/
@ koni:
Danke für den Link! Hehe, der Junge ist nicht auf den Mund gefallen… :)
Ein schöner Artikel!
Ich habe aber doch noch eine Frage: Für mich wäre es ein ziemliches Sicherheitsrisiko, wenn ich den Pfad zur Font einfach aus der CSS auslesen kann – für den Fall dass ich eine kostenpflichtige Schriftart nutze.
Gibt es dafür schon Lösungen?
Hallo,
hier der Link: http://www.getoutofmyinternet.com/2011/02/webkit-und-die-font-face-krizzle-shizzle-und-eine-losung-die-keine-sein-kann/
Das hat was mit dem Anti-Aliasing zu tun, selbst ausprobiert habe ich den Hack aber noch nicht.
Liebe Grüße,
koni
Ein Konvertierungstool in alle Formate.
Erstellt ein komplettes Package inkl. Beispiel-HTML-Seite:
http://www.fontsquirrel.com/fontface/generator
Hallo,
ich liebe @font-face und nutze es selbst mit Freuden auf meiner Website. Das einzige Problem ist gerne mal das falsche Rendering der Fonts, aber auch da haben findige Entwickler schon einen Hack gefunden.
Liebe Grüße,
koni
@ koni:
Direkt auf falsche Renderings bin ich bis jetzt noch nicht gestossen. Viele Schriften sehen aber „unschön“ aus, weil das Anti-Aliasing fehlt, wobei das auch wieder Browserabhängig ist. Hast du denn Links zu den Hacks?
@ Dieter:
Danke für den Tipp! Den Generator kannte ich noch nicht. Und schon ist er in meinen Lesezeichen :)