Meine Westernschrift ist wieder da

Dieser Beitrag wurde vor 13 Jahren 7 Monaten 24 Tagen veröffentlicht. Die Informationen in diesem Beitrag sind möglicherweise veraltet. Bitte benutze die Suche oder das Archiv, um nach neueren Informationen zu diesem Thema zu suchen.

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.