Auf dem eigenen Webserver Google Fonts in WordPress einbinden 

Google Fonts bietet sich einfach an, denn aktuell gibt es über 1500 verschiedene Fonts, die dir zur freien Nutzung zur Verfügung stehen. Damit kannst du deinem Webauftritt eine individuelle Note geben.

Google Fonts auf dem eigenen Webserver einbinden geht ganz einfach in drei Schritten – ich zeige dir wie.

Warum Google Fonts auf eigenem Webserver einbinden?

Du könntest Google Fonts auch direkt vom Google Server einbinden. Dagegen spricht jedoch die Ladezeit. Google hat zwar sicherlich schnelle Server, doch es entstehen immer Verzögerungen, wenn Ressourcen von externen Servern geladen werden.

Zudem werden jedes Mal die Schriften vom Google Server geladen, wenn ein User deine Seite öffnet. Dabei wird gecheckt, ob es eine neuere Version der Schriften gibt. Neben diversen Daten wird dabei auch die IP-Adresse des Users übermittelt. Deshalb empfehle ich dir, Google Fonts über deinen eigenen Webserver zu laden, um die Kontrolle beim Datenschutz zu behalten.

Google Fonts herunterladen

Um die Schriften auf deinen Server laden zu können, musst du sie vorher bei Google Fonts herunterladen. Wähle dazu den gewünschten Font aus und klickst rechts oben auf „Select this Font“.

Rechts unten findest du einen dunklen Balken mit dem Text „1 Family Selected“. Klickst du drauf, fährt ein kleines Fenster aus, in dem du rechts oben den Download-Button findest. Wiederhole diesen Schritt beliebig oft, wenn du mehrere Schriften herunterladen möchtest und lade dir am Ende alle Schriften mit einem Klick herunter.

Um die Sache zu vereinfachen, kannst du auch den Google Webfonts Helper von Mario Ranftl benutzen. Mit diesem Service kannst du deine Schrift auswählen und alle benötigten Font-Formate sowie die dazugehörige CSS-Datei downloaden.

Google Fonts auf den eigenen Webserver laden

Wenn du alle Font-Formate beisammen hast, kannst du sie mit einem FTP-Programm auf deinen Server laden. Lege dazu am besten einen Ordner mit dem Namen fonts im Ordner deines Child-Themes an und übertrage alle Font-Formate in diesen Ordner.

Google Fonts einbinden

Binde nun die Schriften per CSS ein. Beim Service Google Webfonts Helper werden dir die CSS-Stile direkt angezeigt. Von dort kannst du sie auch kopieren und in die CSS-Datei deines Child-Themes einfügen.

In dem nachfolgenden Beispiel habe ich die beiden Schriften Roboto und Montserrat im Schnitt Regular genutzt:

/**  
* Google Fonts auf dem eigenen Webserver in WordPress einbinden  
* https://wp-panda.de/
*/
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Regular'), local('Montserrat-Regular'),
       url('../fonts/montserrat-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v12-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}

Achte hierbei darauf, den Pfad zu dem Ordner anzupassen, in den du deine Schriften hochgeladen hast. Nur so können die Schriften gefunden und geladen werden.

Ordnen als nächstes in deiner CSS-Datei die Schrift den gewünschten Elementen zu. In dem Beispiel ist es das Ziel, dass im body die Schriftart Roboto und für die Headlines h1, h2 und h3 die Schriftart Montserrat verwendet wird.

/**  
* Google Fonts auf dem eigenen Webserver in WordPress einbinden  
* https://wp-panda.de
*/
body {
    font-family: "Roboto";
}

h1, h2, h3 {
    font-family: "Montserrat";
}

Verbindung zum Google Server unterbrechen

Standardmäßig nutzen viele Premium-Themes die Google Fonts. Um zu vermeiden, dass unnötige Google Fonts geladen werden, solltest du die Funktion besser deaktivieren. Sollte dein Theme dir keine Option zur Deaktivierung anbieten, kontaktieren am besten den Entwickler des Themes.

Alternativ kannst du das Plugin Remove Google Fonts References installieren – es lässt eine Verbindung zum Google Server nicht zu. Das Plugin muss nur installiert werden. Es ist keine weitere Konfiguration erforderlich.

Funktionstest machen

Teste nun, ob alles funktioniert. Hierfür löschst du deinen Cache und überprüfst, ob deine Schriften geladen werden.

Wenn du ganz sicher gehen möchtest, kannst du in den Browsern Chrome und Firefox die Webentwickler-Tools öffnen. Unter „Quellen“ oder „Sources“ findest du die verwendeten Verbindungen. Wenn statt der zuvor angezeigten Verbindungen zu den Google Servern fonts.googleapis.com und fonts.static.com nun deine lokalen Schriften angezeigt werden, sind die Fonts erfolgreich bei dir eingebunden.