Google-Web-Fonts in WordPress einbinden (Update)

Eine alternative Schrift in ein WordPress-Theme einzubinden ist nicht weiter kompliziert. In diesem Artikel beschreibe ich drei Möglichkeiten, wie Du Web-Fonts in Dein WordPress-Theme einbinden kannst: Google-Webfonts, Typekit und die @font-face-Methode.
Die Schrift-Darstellung funktioniert in allen modernen Browsern gut, es spricht also nichts dagegen, Verdana, Arial und Times in den Ruhestand zu schicken.

1. Google Web-Fonts

Die Oberfläche der Google Web Fonts-Seite wurde vor einiger Zeit überarbeitet, das Testen und Zusammenstellen von Schriften ist jetzt sehr bequem und unkompliziert. Du kannst Dir dort eine “Kollektion” von Schriften zusammenstellen – und beim Klick auf den Button “Use” zeigt Dir Google die fertigen Code-Schnipsel, mit denen Du die Schriften in das WordPress-Theme einbetten kannst.

Im Prinzip gibt es dazu zwei Möglichkeiten, wobei ich dem zweiten Weg den Vorzug geben würde:

1. Google-Code in die header.php einbauen

  • Die header.php im WordPress-Theme öffnen
  • Den Codeschnipsel “Standard” in den head-Bereich einsetzen.

2. Google-Fonts ins Stylesheet importieren

  • style.css öffnen
  • Code ganz oben einfügen:

Im Stylesheet wird die Schrift dann ganz normal über font-family aufgerufen:

Die Schriften werden in allen Browsern ohne Fehler angezeigt: Chrome, Firefox (ab 3.6), Safari, Explorer 7 und Explorer 8. Sogar im IE 6. Für den Fall, dass ein älterer Browser die Schrift nicht darstellen kann (FF 3.0 zum Beispiel), oder auch für den Fall, dass die Schrift vom Google-Server einmal nicht ausgeliefert wird, solltest Du allerdings eine Fallback-Schrift angeben.

2. Typekit

Bei Typekit gibt es eine sehr viel größere Auswahl an Schriften und Schnitten.
Das Einbinden der Schrift geht etwas anders vor sich als bei den Google-Fonts. Man meldet sich bei Typekit an und eröffnet ein Konto. Darin stellt man sich ein eine Auswahl der Schriften, die man nutzen möchte, zusammen. Zwei Schriften für eine einzelne Website sind kostenlos nutzbar, darüber kostet die Nutzung eine jährliche Gebühr.

Man bekommt von Typekit Javascript  mit einem Nummerncode, den man in den head-Bereich der Website einträgt. Anschließend kann man die Schriften ins Stylesheet einbinden. Es kann allerdings eine Weile dauern, bis die Schriften angezeigt werden.

Für typografisch anspruchsvolle Projekte ist Typekit eine sehr interessante Option. Typekit hat viele hochwertige Schriften der großen Foundries im Angebot. Leider kann man nicht alle Schriften mit einem kostenlosen Account nutzen, dafür steht nur eine kleine Auswahl zur Verfügung.

3. @font-face-Syntax

Diese Variante kommt dann zum Einsatz, wenn Du mit Schriften arbeiten möchtest, die auf Deinem eigenen Server liegen. Die Schriften werden über die CSS-Anweisung @font-face in die style.css eingebunden. Die Schriften müssen ausserdem im selben Verzeichnis liegen wie die CSS-Datei. Voraussetzung ist allerdings, dass der Font in unterschiedlichen Formaten (TTF, WOFF, EOT und SVG) vorliegt. Die Formate füttern unterschiedliche Browser, die jeweils nur ein Format lesen können.

Der Code schaut dadurch etwas umständlich aus:

Quelle: Smashingmagazine

So ganz fehlerfrei funktioniert die Methode meiner Erfahrung nach nicht. Es gibt Probleme mit älteren Firefox-Versionen und mit dem Internet Explorer.
Ethan Dunham und Richard Fink haben daher eine “Bullet-Proof”-Version gebastelt, die die Probleme abfangen soll:
The New Bulletproof @Font-Face Syntax und Further Hardening of the Bulletproof Syntax.

Fazit

Ich konzentriere mich inzwischen ganz auf die Google Web-Fonts. Handhabung und Ergebnis sind in Einfachheit und Effizienz ungeschlagen. Typekit ist eine interessante Alternative, wenn man mit der (begrenzten) Auswahl von Google nicht zurechtkommt.
Die @font-face-Variante mit selbst gehosteten Schriften setze ich zur Zeit nicht mehr ein. Der Mehraufwand für Browser-Tests und Tweaks lohnt sich meiner Meinung nur bei Projekten mit speziellen typografischen Anforderungen.

 

Veröffentlicht von

Hallo, mein Name ist Kirsten Schelper. Ich bin Webdesignerin aus München mit einer Passion für italienischen Kaffee, vegetarische Küche und Fahrradfahren. Ihr findet mich nicht bei Facebook, dafür aber auf Twitter und auf Google+.

Kommentare sind geschlossen.