Soeben bin ich über einen Tweet von @wpSEO gestolpert, mit einem Link ins Google Blog, zu einem Artikel, in welchem OpenSource Schriften für alle vorgestellt werden: Introducing the Google Font API & Google Font Directory. Was das bedeutet, möchte ich an einem kleinen Beispiel zeigen; es braucht nur ein wenig XHTML und CSS…
wpseo tweet google-fonts
Mit diesem Service von Google kann man ganz einfach auf einige OpenSource-Schriftarten zugreifen, die man dann auf der eigenen Webseite darstellen kann. Es ist also egal, ob der Seitenbesucher diese Schriftart auf dem eigenen Rechner installiert hat, oder nicht…
Zuerst fügen wir im HEAD-Bereich des Seitencodes folgende Zeile ein, in welcher in der URL auch gerade die gewünschte Schriftart als Parameter angegeben wird:
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"></link>
Im Google Font Directory findest Du einige verfügbare Schriftarten.
Danach ist diese Schriftart ganz “normal” in den CSS-Angaben einzusetzen wie sonst auch. In die CSS-Datei gehört nun z.B. folgenden Code:
h3.ueberschrift {
font-family: "Lobster", serif;
font-size:280%;
}
Nun kann man z.B. im XHTML im BODY-Bereich des Seitencodes einfach einer Überschrift die entsprechende CSS-Klasse zuweisen:
<h3 class="ueberschrift">Spezielle Schriftart</h3>
Da ich jetzt nicht in die index.php nur zum Zwecke der Demonstrierung (dauerhaft) die Google-API einbinden will, findest Du hier ein Beispiel.
 |
|
Danke für die hilfreichen Tips, haben mir echt weitergeholfen:)
Comment von Steffan — 28. Mai 2010 @ 08:19
[...] Mit Google OpenSource Schriften einbinden [...]
Pingback von Top 10 der Woche 20/10 « Wochenrückblicke — 23. Juni 2010 @ 17:12
Danke für die Tips
Comment von Faice — 21. August 2010 @ 00:48
Das ist wirklich eine tolle Sache nur leider machen IE7 und IE8 mal wieder das einbinden schwer. Oder funktionieren in euren IE s die Schriften ?
Comment von Karsten — 6. Dezember 2010 @ 22:14
yep, in meinem 6.0/4.0/5.01/5.55 unter XP funktioniert es. Im 3.0 allerdings nicht ;o)
Guck hier: browsershots.org
Okay sind da zum Beispiel:
Windows 7: MSIE 9.0
Windows XP: Safari 4.0, MSIE 6.0/7.0/8.0, Minefield 3.7, Avant 11.7, Shiretoko 3.5
Windows 2000: Firefox 4.0, Opera 9.80
Windows Vista: Chrome 8.0.552.215
Ubuntu 9.10: Opera 9.80, Firefox 3.6.12, Chrome 5.0.375.38/6.0.472.62, Iceape 3.6.3
Comment von Roman — 13. Dezember 2010 @ 02:23