Sie möchten eine spezielle Schrift in Ihre WordPress Webseite einbinden? Mit dem kostenlosen Font Service von Google ist dies kein Problem. Dieser bietet inzwischen über 600 Fonts und eine einfache Anleitung zur Verwendung in Webseiten an. Wie man Google Fonts in WordPress einbinden kann, erkläre ich im folgenden Tutorial.

Die richtige Schrift finden

1. Schriftart auswählen

Unter https://fonts.google.com/ können Sie sich eine Schrift nach verschiedenen Kriterien aussuchen.

google fonts in wordpress einbinden step 1

 

2. Schriftschnitte auswählen

Google Fonts in WordPress einbinden step 2

Zur Optimierung der Ladezeit sollte man nur die Styles auswählen, die man auch wirklich benötigt. Google zeigt hier eine Vorschau, wie sich die Auswahl auf die Ladezeit der Webseite auswirkt.
Zudem sollte man auch darauf achten, nicht zu viele verschiedene Schriften zu nutzen.

In diesem Beispiel habe ich mich für folgende Fonts entschieden:
Open Sans (Normal 400 und Bold 700) sowie Roboto Slab (Normal 400 und Bold 700)

3. Code für den Header-Bereich

Google Fonts liefert bereits den fertigen Code, den man direkt in den Header der Webseite einfügen kann.
In WordPress kann man dies natürlich auch einfach in den Header (header.php) kopieren. Vorteilhafter und eleganter ist aber das Einbinden über die Datei functions.php.
Dadurch wird gewährleistet, dass bei der Nutzung von Child-Themes oder Plugins die Schrifteinstellungen nicht überschrieben werden.

google font code

Google Fonts in WordPress einbauen

1. functions.php anpassen

Öffnen Sie die Datei functions.php mit einem Editor und fügen Sie folgende Zeilen ein:


 function load_google_fonts() {
 wp_register_style('googleFonts', 'https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto+Slab:400,700');
 wp_enqueue_style( 'googleFonts');
 }
 add_action('wp_print_styles', 'load_google_fonts');

Hierdurch werden die Google Fonts in WordPress eingebunden und beim Laden der Webseite automatisch im Header ausgegeben.

2. CSS-Datei bearbeiten

Damit die gewählte Schrift auch auf der Webseite angezeigt wird, müssen Sie nur noch die CSS-Datei (style.css) des WordPress Themes anpassen.

body (font-family: 'Open Sans'; font-size:18px;)
h1, h2, h3 (font-family: 'Roboto Slab'; font-size:24px;

Alternativ können Sie den CSS-Code auch in den Theme Customzier einfügen.