Meine Westernschrift ist wieder da

WordPress Header, Foto: Cowboy of Bottrop, Lizenz: CC-by-sa 3.0 de
WordPress Header, Foto: Cowboy of Bottrop, Lizenz: CC-by-sa 3.0 de
closeDieser Beitrag wurde vor 14 Jahren 3 Monaten 17 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 :cry:

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 :smoke:

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.

Keep it Country, Markus
Über Markus 1268 Artikel
Ich schreibe hier über Country Music und Linedance, vor allem über besuchte Veranstaltungen, aber auch Geocaching, Fußball und Politik gehören zu meinen Themen. Politisch bin ich eher links-liberal einzuordnen, beim Fußball steht der FC Schalke 04 im Mittelpunkt des Interesses.

1 Kommentar

Kommentar hinterlassen

E-Mail Adresse wird nicht veröffentlicht.

*


Mit Absenden des Kommentars akzeptiere ich die Speicherung und Verarbeitung meiner Daten gemäß der Datenschutzerklärung.


;) 
:) 
:D 
:( 
:/ 
:p 
:o 
:lol: 
:roll: 
:angry: 
:smoke: 
:mrgreen: 
:silence: 
:blush: 
:kiss: 
mehr …