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 13 Jahren 7 Monaten 2 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 1267 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...