Google Fonts zu verwenden ist eine tolle Sache. Aktuell gibt es über 850 verschiedene Fonts, die zur freien Nutzung zur Verfügung stehen. Mit Hilfe von Google Fonts kannst du deiner Webseite einen individuellen Eindruck verleihen. Wir möchten dir in 3 Schritten zeigen, wie du Google Fonts auf dem eigenen Webserver einbindest.
Warum solltest du Google Fonts auf eigenem Webserver einbinden?
Du kannst Google Fonts direkt vom Server von Google einbinden. Dagegen spricht jedoch zu einem die Ladezeit. Sicherlich hat Google schnelle Server, allerdings entstehen immer Verzögerungen, wenn Ressourcen von externen Servern geladen werden.
Zum anderen werden die Schriften jedes Mal vom Google Server geladen, wenn ein User deine Seite öffnet. Dabei wird sich erkundigt, ob es eine neuere Version der Schriften gibt. Neben anderen Daten wird dabei auch die IP Adresse des Users übermittelt. Um die Kontrolle beim Datenschutz zu behalten, empfehlen wir dir, die Google Fonts über deinen eigenen Webserver zu laden.
Google Fonts herunterladen
Damit du die Schriften auf deinen Server laden kannst, musst du sie dir vorher bei Google Fonts herunterladen. Dazu wählst du die gewünschte Font aus und klickst rechts oben auf „Select this Font“.
Dann findest du rechts unten einen dunklen Balken mit dem Text „1 Family Selected“. Wenn du darauf klickst, fährt sich ein kleines Fenster aus. In dem Fenster findest du rechts oben den Downloadbutton. Möchtest du mehrere Schriften herunterladen, kannst du den Schrift beliebig oft wiederholen und am Ende lädst du dir alle Schriften mit einem Klick herunter.
Wenn du es etwas einfacher haben möchtest, kannst du auch den Google Webfonts Helper von Mario Ranftl nutzen. Bei dem Service kannst du deine Schrift auswählen und alle benötigten Font-Formate und die dazugehörige CSS-Datei herunterladen.
Google Fonts auf dem eigenen Webserver laden
Wenn du alle Font-Formate hast, die du benötigst, kannst du sie mit Hilfe eines FTP Programms auf deinen Server laden. Dazu legst du am Besten einen Ordner mit dem Namen fonts im Ordner deines Child-Themes an und überträgst alle Font-Formate in den Ordner.
Google Fonts einbinden
Nun kannst du die Schriften per CSS einbinden. Beim Service Google Webfonts Helper werden dir die CSS-Stile direkt angezeigt und du kannst sie von dort kopieren und die in CSS-Datei deines Child-Themes einfügen.
Bei unserem Beispiel haben wir die beiden Schriften Roboto und Montserrat im Schnitt Regular genutzt:
/**
* Google Fonts auf dem eigenen Webserver in WordPress einbinden
* https://wp-bibel.de/tutorial/google-fonts-auf-dem-eigenen-webserver-einbinden/
*/
/* 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 */
}
Hier ist zu beachten, dass du den Pfad zu dem Ordner anpassen musst, in dem du deine Schriften hochgeladen hast. Nur dann können die Schriften gefunden und geladen werden.
Nun musst du in deiner CSS-Datei noch die Schrift den gewünschten Elementen zuordnen. In unserem Beispiel möchten wir, dass bei dem body die Schriftart Roboto und die Headlines h1, h2 und h3 die Schriftart Montserrat verwendet wird.
/**
* Google Fonts auf dem eigenen Webserver in WordPress einbinden
* https://wp-bibel.de/tutorial/google-fonts-auf-dem-eigenen-webserver-einbinden/
*/
body {
font-family: "Roboto";
}
h1, h2, h3 {
font-family: "Montserrat";
}
Die Verbindung zum Google Server unterbrechen
Viele Premium-Themes nutzen Google Fonts standardmäßig. Um zu vermeiden, dass die nun unnötigen Google Fonts geladen werden, solltest du diese Funktion deaktivieren. Wenn dein Theme keine Option für die Deaktivierung zur Verfügung stellt, kannst du Entwickler deines Themes kontaktieren.
Als Alternative kannst du das Plugin Remove Google Fonts References installieren, das die Verbindung zum Google Server nicht zulässt. Das Plugin muss nur installiert werden und funktioniert ohne weitere Konfiguration.
Testen ob alles funktioniert
Zum Schluss solltest du deinen Cache löschen und schauen, ob deine Schriften geladen werden.
Um ganz sicher zu gehen kannst du in Chrome- oder Firefox Browser 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 deine lokalen Schriften angezeigt werden, hast du die Schriften erfolgreich eingebunden.
