Das Einbinden von eigenen Schriftarten ist nicht ganz ohne – unter dem Strich aber doch zu einfach, um auf hübsche und besonders passende Schriftarten zu verzichten. Dr. Code zeigt Ihnen wie es auf jeden Fall klappt.
Haben Sie Ihre gewünschte Schriftart gefunden? Ok – dann geht’s jetzt ans Einbinden. Speichern Sie Ihre heruntergeladenen Schriftartdatei(en) auf Ihrem Webserver. Im Idealfall in ein spezielles Verzeichnis Ihres Child-Themes. Nennen Sie das Verzeichnis z.B.
fonts
Falls Ihre Schriftart in mehreren Dateiformaten angeboten wird, speichern Sie auch alle diese Versionen in ebendieses Verzeichnis. Das erhöht die Kompatibilität – vor allem mit Browsern älteren Jahrgangs. Gängige Font-Dateiformate sind etwa:
- TrueType Font (TTF)
- OpenType Font (OTF)
- Embedded OpenType Font (EOT)
- Web Open Font Format (WOFF)
Nehmen wir mal an, Sie verwenden die Schriftart «Coves» und haben diese bloss als TruType-Fontr (TTF) erhalten. Dann kopieren Sie nun folgenden Code in das Stylesheet Ihrer Website – Sie finden es unter Design/Customizer/Zusätzliches CSS:
@font-face {
font-family: CovesRegular;
src: url('fonts/coves-regular.ttf');
}Setzen Sie den Code recht weit oben in Ihrem Stylesheet ein, damit der Browser die Schriften beizeiten lädt.
Falls Ihnen die Schriftart noch in anderen Formaten zur Verfügung steht, kann folgender Code eine Variante sein, welche Sie anstelle der obigen Zeilen einsetzen können:
@font-face {
font-family: 'CovesRegular';
src: url('fonts/coves-regular.eot');
src: local('Coves Regular'),
url('fonts/coves-regular.ttf') format('truetype'),
url('fonts/coves-regular.woff') format('woff');
}- Sie müssen natürlich nur jene Dateiformate angeben, welche Sie auch besitzen.
- In Zeile 4 checkt der Browser, ob die Schriftart allenfalls auf dem lokalen Rechner installiert ist. Bei der exotischen Coves dürfte das allerdings nicht allzu häufig der Fall sein.
Der Font ist nun eingebunden und bereit zum Einsatz. Im CSS-Stylesheet könnten Sie nun etwa folgende Zeilen einsetzen, wenn Ihr Font für alle Titel in halbfetter Auszeichnung verwendet werden soll:
h1, h2, h3, h4, h5, h6 {
font-family: 'CovesRegular';
font-weight: 700;
}Das war’s auch schon. Keine Rocket-Science. Nicht?
Werbung
Werbung
