Schriften per @font face einbinden

Robert Windisch edited this page Jul 25, 2015 · 1 revision

Deutsch / German

Clone this wiki locally

In unserem Childtheme VintageFolio haben wir das erste Mal eine Schrift von Font Squirrel verwendet. In diesem Tutorial möchte ich euch zeigen, wie ihr eure Childthemes mit Schriften von Font Squirrel aufwerten könnt. Ich habe mich beim VintageFolio Childtheme für die Schrift Bebas Neue entschieden. Werft bei eurer favorisierten Schrift einen Blick auf die Character Map und schaut, ob auch Sonderzeichen eurer Sprache, wie zum Beispiel das Währungssymbol oder Umlaute in dem Kit, vorhanden sind. Anschließend geht ihr auf den Reiter @font-face kit. Unter “Choose a Subset” könnt ihr ein Subset in verschiedenen Sprachen auswählen. Das macht die Dateien etwas kleiner. Oder ihr wählt “Don’t Subset”, dann sind alle Zeichen aus dem Kit vorhanden. Wählt anschließend TTF, EOT, WOF und SVG aus und ladet das Kit herunter. Die .zip wird lokal entpackt. Anschließend erstellt ihr in der Root von eurem Childtheme einen Ordner fonts. Das ist ganz wichtig! Nur so stimmen beim Komprinieren der Stylesheets die Pfade zu den Schriftdateien. Die Dateien aus der .zip Datei werden nun in den Ordner fonts per FTP hochgeladen. Auf das Stylesheet und die demo.html könnt ihr verzichten, die werden nicht benötigt. Jetzt wird die Datei theme.css aus dem Childtheme geöffnet. Ganz am Anfang (noch vor den @media Regeln) des Stylesheets binden wir die Schrift ein:

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('../../fonts/BebasNeue-webfont.eot');
    src: url('../../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/BebasNeue-webfont.woff') format('woff'),
         url('../../fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('../../fonts/BebasNeue-webfont.svg#webfontj1CI1MAi') format('svg');
}

Beachtet dabei die Pfade zum Verzeichnis fonts! Jetzt wird die neue Schrift den gewünschten Elementen zugewiesen, in unserem Beispiel allen Überschriften:

h1, h2, h3, h4, h5, h6 {
    font-family: 'BebasNeueRegular', arial, sans-serif;
    font-weight: normal;
    font-style: normal;
}

Zum Schluß wird das Ergebnis in allen gängigen Browsern überprüft.