Google Web Fonts einbinden
Per CSS 3 lassen sich mit Webfonts andere Schriftarten als die Systemschriften einbinden. Bis dato musste man bei der Wahl der Schriftart darauf achten, dass dies Systemschriften von Windows / Mac / Linux sind. Auch all diese Tricks mit Image-Replacements (Fahrner Image Replacement [FIR]; Scalable Inman Flash Replacement [sIFR], Malarkey Image Replacement [MIR] oder Definitive Solution to Image Replacement [DIR]) - kann man in Zukunft vergessen.
Eine Quelle für Webfonts sind die Google Web Fonts .. s. Link [01] .. (es gibt ganz sicher weitere Quellen - bitte immer auf die zur Schriftart angegebene Lizenz achten).
Zwar gibt Google unter “Quick-use” einen funktionierenden Code für Copy & Paste vor, um die Schrift auf seiner Webseite einzubinden … aber es gibt bei dann jedem Seitenaufruf der eigenen Webseite immer einen dynamischen Request zu Google.
Um dies zu vermeiden und Daten nur vom eigenen Server zu holen und nicht zuletzt auch, um Daten effektiv cachen zu können, kann man die Schriftart auch auf seinen Webserver kopieren und von dort einbinden.
1. Schritt: herunterladen
Gewünschte Schriftart(en) zur Collection hinzufügen und rechts oben über den “Download your collection” dann als ZIP-Datei herunterladen.
2. Schritt: auspacken der ttf Datei
Aus dem ZIP-Archiv die ttf-Dateien unterhalb eines Webroot ablegen.
Für das nachfolgende Beispiel habe ich aus dem Zip-Archiv die ttf-Datei ChelseaMarket-Regular.ttf in einem Ordner /fonts abgelegt.
3. Schritt: Schriftart im CSS bekanntmachen
Im CSS nimmt man diese Zeilen auf:
@font-face {
font-family: 'Chelsea Market';
font-style: normal;
font-weight: 400;
src: url("/fonts/ChelseaMarket-Regular.ttf") format("truetype");
}
4. Schritt: gewünschten CSS-Objekten diese Schriftart zuweisen
Die neue font-family lässt sich nun Tags, Klassen und Ids zuweisen.
Nicht vergessen, dass es vielleicht auch ältere Browser gibt, die nicht so viel vom CSS 3 verstehen. Also bei der Font-Family noch weitere Schriften als Fallback angeben.
H1{
(...)
font-family: "Chelsea Market",UltraRegular, Georgia, serif;
(...)
}
5. Schritt: optional noch etwas Tuning
Wer um die Schrift noch Rahmen möchte und Schlagschatten, wie z.B.:
… der kann sich des CSS3-Attributs text-shadow annehmen .. s. Link [02].
weiterführende Links:
- Google Web Fonts
- CSS-Textschatten (Anm.: die Seite wurde deaktiviert)