Google Web Fonts in WordPress einbinden – Anleitung

Google stellt mit seinen Web Fonts eine riesige Sammlung von kostenlosen Schriftarten zur Verfügung, die man direkt auf seiner Website verwenden kann. In diesem Artikel gibt es eine Schritt für Schritt Anleitung wie man die Google Web Fonts in WordPress einbinden kann.

Über 1100 Webfonts stehen Webmastern bei Google Web Fonts kostenlos zur Verfügung. Von klassischen Schriftarten über Handschriften bis hin zu modernen Sans-Serif Schriften wie Raleway und Open Sans gibt es für sogt wie alle Zwecke die passende Schrift.

Hat man sich für eine der vielen unterschiedlichen Schriftarten entschieden, gibt es verschiedene Möglichkeiten die Schriftart auf der eigenen Website zu nutzen. Ich zeige jetzt wie man eine Google Web Font in WordPress einbindet und auf verschiedene Texte anwendet.

Google Web Font wählen

Hat man eine passende Schriftart für seine Website gefunden, klick man auf den Button „Quick-use“ und wird anschließend auf eine Unterseite der gewählten Schriftart weitergeleitet. Dort sind dann die folgenden Schritte nochmal Schritt für Schritt aufgelistet.

google-web-fonts-in-wordpress-einbinden-code-kopieren

Als Erstes muss man sich entscheiden, welche Schriftschnitte (kursiv, bold, extra bold etc.) man auf seiner Website verwenden möchte. Man sollte hier auf keinen Fall alle wählen weil man auf Nummer sicher gehen möchte. Jede extra Schriftart bedeutet zusätzlichen Traffic, welcher zu Lasten der Ladezeit gehen kann. Der zweiter Schritt muss für gewöhnlich nicht extra angepasst werden, sofern man das lateinische Alphabet nutzen möchte. Im Moment lässt sich diese Punkt ohnehin nicht ändern.

google-web-fonts-in-wordpress-einbinden-anleitung-schrift-wählen

Googel Web Font einbinden

Als Drittes stehen einem nun drei Möglichkeiten zur Verfügung, die Schrift in seine Website einzubinden. Für WordPress eignet sich die erste Variante (Standard) gut, da man dabei den Code ganz einfach in die header.php einsetzet. An dieser Stelle ist es praktisch wenn man sich zuvor ein Child Theme bei WordPress erstellt hat, da dann alle Änderungen am Code und in der style.css einfach rückgängig gemacht und bei Themeupdates nicht verloren gehen können.

google-web-fonts-in-wordpress-einbinden-anleitung-screen

Um nun den Code in die header.php einzufügen, kann man entweder über ein FTP-Programm auf den Ordner wo die Website liegt zugreifen oder die Datei über das WordPress Backend aufrufen. Für die zweite Methode geht man im Backend auf „Design –> Editor –> header.php“ und schon öffnet sich der Code. Dort sucht man nun den öffnenden <head>-Tag und fügt den von Google bereitgestellten Code ein.

google-web-fonts-in-wordpress-header-php

Per CSS Texten und Überschriften die Schriftart zuweisen

Nachdem der Head-Tag die entsprechenden Zeilen Code enthält, vergibt man nun den gewünschten Texten über die style.css die eingebundene Schriftart und weitere Parameter wie die Größe, Farben etc.. Die style.css findet man ebenfalls über den WordPress Backend Editor. Zusätzlich zur Google Web Font empfielt es sich zwei bis drei Standard Alternativ Schriften zu vergeben, falls die Google Web Fonts mal nicht geladen werden können. Das kann dann ungefähr so aussehen:

h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }

Ist das getan, sollte der in der style.css angesprochene Text in der neuen Schriftart erscheinen. Zur Verbesserung der Ladezeit und Performance hat Elma von elmastudio.de eine tolle Anleitung verfasst, wie man Google Web Fonts über die Functions.php einbinden kann.

0 Kommentare

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.