Ich hatte bisher den Blogtitel hier immer in einer Westernschrift als Grafik eingebunden. Nach meiner letzten Renovierung war die Schrift weg. Und durch meinen Rechner-Crash letztes Jahr im MĂ€rz oder so ist auch die TTF-Datei von meinem Rechner verschwunden, und die Grafiken passten einfach mal nicht in dieses Design hier
Heute habe ich im c’t-Sonderheft Webdesign einen Artikel ĂŒber den kommenden Standard CSS 3 gelesen, und wurde wieder auf das Thema “downloadbare Schriftarten” aufmerksam. Das wird es in CSS 3 geben, und die meisten Browser haben viele Sachen aus dem kĂŒnftigen Standard bereits implementiert. Also frisch ran ans Werk, die TTF-Datei wieder besorgt, in das Theme-Verzeichnis geladen, und die Schriftart mit folgender CSS-Anweisung in die style.css
eingebunden:
@font-face {
font-family: Fontname;
src: url(Fontname.ttf);
}
Mit @font-face
deklariere ich, dass ich hier eine neue Schriftart einrichten möchte. Ăber font-family: Fontname;
gebe ich den Namen der Schriftart an, ĂŒber den ich diese spĂ€ter aufrufen kann. Sinnvollerweise ist es der originale Fontname, Namen mit Leezeichen fasst man in AnfĂŒhrungszeichen (“Font Name”) ein. Zu guter Letzt gebe ich mit src: url(Fontname.ttf);
die Schriftarten-Datei an, die dafĂŒr verwendet werden soll. Der Pfad ist relativ zum StyleSheet, im Beispiel also im gleichen Verzeichnis. Jetzt kann man die neue Schriftart ĂŒberall im Blog verwenden
Jetzt habe ich im StyleSheet die Formatierung des Blogtitels gesucht, und einfach um die neue Schriftart ergÀnzt:
#headr h1 {
margin: 0;
padding: 20px 0 0 600px;
/*font-size: 3em;*/
font-size: 4em;
font-family: Fontname, Geneva, Arial, Helvetica, sans-serif;
}
Hier kommt noch dazu, dass ich SchriftgröĂe geĂ€ndert habe, da die neue Schriftart kleiner ist. Die originale font-size
-Deklaration habe ich auskommentiert, und eine neue mit der neuen GröĂe drunter gesetzt.
Wichtig ist noch, dass die neue Schriftart als erste genannt wird, damit sie auch verwendet wird. Die danach genannten Schriftarten werden als Fallback genutzt, falls ein Àlterer Browser mit der Einbindung der neuen Schriftart nicht zurecht kommt.
Getestet habe ich das im Firefox 3.6.8, Opera 10.61, Google Chrome 5.0.375.127, und im Internet-Explorer 8.0.7600.16385, und in allen Browsern funktioniert das wie gewĂŒnscht.
Hmm… Ich habe heute festgestellt, dass die Schrift unter Linux gar nicht gut aussieht…
Hat jemand nen Tipp, wie das besser geht?