🎁 Kostenloses Videotraining 👩🏻‍💻
So erstellst du eine Website, die Besucher in Kunden verwandelt!
Jetzt kostenlos anschauen!

KOSTENLOSES VIDEOTRAINING

Du willst eine Website erstellen, die Besucher in Kunden verwandelt? 💻💰

In diesem kostenlosen Videotraining zeige ich dir, wie du deine eigene strategische Website erstellst – und zwar selbst, wenn du nie zuvor eine Website erstellt hast!
Google-Fonts-WordPress-einbinden

Google Fonts lokal in WordPress einbinden (DSGVO-konform!)

Zerbrichst du dir gerade den Kopf, wie du deine Google Fonts lokal in deine WordPress Website einbindest, ohne vorher Informatik studiert haben zu müssen? Dann hast du den richtigen Blogartikel in den unendlichen Weiten des Internets aufgespürt und darfst dir dafür schon einmal kräftig auf die Schulter klopfen!
Das mit den Google Fonts kriegen wir jetzt auch noch hin!

Warum Google Fonts lokal in WordPress einbinden?

Seit der DSGVO (Datenschutzgrundverordnung), die am 25. Mai 2018 in Kraft getreten ist, steht die europäische Webwelt auf dem Kopf. Was ist verboten? Was ist erlaubt? Ein Themenpunkt, der immer wieder angesprochen wird, ist die Verwendung von Google Fonts.

Die Nutzung von Google Fonts hat sich über die Jahre immer weiter etabliert. Es ist ja auch so ungemein praktisch! Die Auswahl der verschiedenen Schriftarten ist immens und bietet extrem viele Möglichkeiten.

Doch um die Schriften darstellen zu können, wird vom Browser des Websitenutzers eine Anfrage an den Google Server gestellt. Und genau das ist der Knackpunkt. Bei dieser Anfrage werden Daten übertragen. Und genau das ist unter der Berücksichtigung der DSGVO streng genommen nicht mehr zulässig.

Viele Websitebetreiber sind deswegen dazu übergangen, die Google Fonts nicht mehr vom Google Server abrufen zu lassen, sondern direkt vom eigenen Server. So werden keine Nutzerdaten mehr an fremde Parteien übermittelt und die DSGVO wird eingehalten. Jippieh!

Doch wie funktioniert das jetzt im Detail?

Schritt für Schritt Anleitung: Google Fonts in WordPress einbinden

1. Schrift auswählen & downloaden

Wenn du bisher schon mit Google Fonts gearbeitet hast, wirst du bereits wissen, welche Schriften du für deine Website benötigst. Andernfalls hast du erst einmal die Qual der Wahl und musst dich für die Schriftarten entscheiden, die du auf deiner WordPress Website verwenden möchtest.

Auf der Seite google-webfonts-helper.herokuapp.com kannst du alle verfügbaren Google Fonts ansehen und downloaden. Wähle hierfür einfach deine Schrift aus der linken Seitenleiste aus.

Anschließend setzt du ein Häkchen bei jedem Schriftschnitt, den du auf deiner WordPress Website gern verwenden möchtest.

Google Fonts Schriftschnitte

Falls du bisher mit CSS noch nicht so viel zu tun hattest, wird der folgende Schritt für dich etwas kompliziert aussehen. Ist er aber überhaupt nicht!

Unter dem Punkt „Copy CSS“ findest du einen langen CSS Code. Unter diesem Code findest du ein kleines Feld mit der Aufschrift „Customize Folder Prefix“. Dahinter ist ein voreingestellter Pfade eingetragen, den du bitte löschst und durch deine Domain und ein „fonts/“ ersetzt. In meinem Fall also beispielsweise „https://www.annikagievers.de/fonts/“. Unter diesem Pfad werden wir die Schriftdateien gleich ablegen.

Google Fonts Präfix für CSS Pfad ändern

Markiere den CSS Code und füge ihn vorerst in eine Textdatei ein. Wir brauchen ihn erst später.

Google Fonts CSS Code zwischenspeichern

Am Ende der Seite findest du einen blauen Downloadbutton, über den du die Schriftdateien downloaden kannst. Falls es nicht automatisch passiert, entpacke den Ordner, sobald der Download abgeschlossen ist.

2. Schrift/en per FTP auf den Server laden

Öffne dein FTP Programm (ich nutze Filezilla) und verbinde dich mit deinem Server. Falls du das noch nie zuvor gemacht hast, findest du bei deinem Webhoster alle Informationen darüber, wie es funktioniert.
Öffne das Verzeichnis deiner WordPress Installation und erstelle einen neuen Ordner mit dem Titel „fonts“ (kleingeschrieben!). In diesen Ordner kopierst du jetzt alle zuvor gedownloadeten Schriftdateien.

3. Schrift in das Stylesheet einbinden

Die Schriften liegen jetzt auf dem Server. Jetzt müssen wir deiner Website noch sagen, wo die Schriften liegen, damit sie auch von dort geladen werden können. Das tun wir, in dem wir das sogenannte Stylesheet deines WordPress Themes anpassen.

Das ist weniger kompliziert als es sich anhört.

Falls du bisher kein Child Theme deines Themes angelegt hast, empfehle ich dir das zu tun, bevor du mit den weiteren Schritten fortfährst. Wie du ein Child Theme anlegst, erfährst du in diesem Artikel:

Warum du ein WordPress Child Theme brauchst und wie du es erstellst

Sobald das erledigt ist, melde dich im Backend deiner WordPress Website an. In der linken Seitenleiste findest du den Menüpunkt „Design“. Beim Überfahren dieses Menüpunkts öffnet sich ein Menü. Hier klickst du bitte auf „Editor“.

Es öffnet sich ein Quelltext mit dem Titel „Style.css“.

Kopiere den zuvor abgelegten CSS Code aus dem Texteditor und füge ihn an das Ende des Quelltextes ein. Anschließend klickst du auf „Datei aktualisieren“.

Die Schriften werden jetzt lokal von deinem Webserver geladen.

Anfragen zum Google Server blockieren und das Laden von Google Fonts verhindern

Auch wenn deine Schriften jetzt lokal von deinem Server geladen werden, haben viele WordPress Themes und Plugins eine automatische Verbindung zum Google Server vorgesehen, die natürlich auch jetzt noch besteht. Um diese Verbindung zu blockieren, empfehle ich dir das Plugin:

„Remove Google Fonts References“

Dieses Plugin kannst du ganz einfach über den Plugin-Bereich deines WordPress Backends finden, installieren und aktivieren.

Das Plugin läuft ganz von allein – ohne dass du noch eine Einstellung vornehmen musst.

Prüfung: Besteht noch eine Verbindung zum Google Server?

Jetzt wird es nochmal richtig spannend. Denn jetzt kommt eine abschließende Prüfung, ob auch wirklich keine Verbindung mehr zum Google Server hergestellt wird.

Am einfachsten geht das mit dem Browser Chrome. Klicke hier einfach mit einem Rechtsklick an eine beliebige Stelle deiner Website und wähle „Untersuchen“ aus.
Eine Seitenleiste öffnet sich. Hier klickst du bitte auf „Source“ um zu sehen, welche Scripte von welchem Server geladen werden.

Sollten hier noch die Quellen „fonts.googleapis.com“ oder „fonts.gstatic.com“ auftauchen, werden die Google Fonts weiterhin vom Google Server abgerufen. Durch das Plugin sollten diese Quellen aber verschwunden sein.

Google Fonts Verbindung Testen

Fazit: Google Fonts lokal in WordPress Website einbinden

Wie du siehst, ist es kein Hexenwerk, deine benötigten Google Fonts lokal in deine WordPress Website einzubinden. Diesen Punkt kannst du jetzt also von deiner „DSGVO“-Liste abhaken!

Es hat nicht so geklappt wie erhofft? Wenn du möchtest, helfe ich dir! Unter diesem Link findest du alles über meine WordPress Hilfe: WordPress Hilfe

KOSTENLOSES VIDEOTRAINING

Du willst eine Website erstellen, die Besucher in Kunden verwandelt? 💻💰

In diesem kostenlosen Videotraining zeige ich dir, wie du deine eigene strategische Website erstellst – und zwar selbst, wenn du nie zuvor eine Website erstellt hast!
website-videotraining

Teile diesen Blogartikel

Diese Artikel könnten dir auch gefallen:

* Bei diesem Link handelt es sich um einen Affiliate-Link. Das bedeutet, dass ich eine Provision erhalte, wenn du auf der verlinkten Website etwas kaufst. Ich empfehle nur Produkte, von denen ich 100%ig überzeugt bin. Für dich entstehen selbstverständlich keine zusätzlichen Kosten!
Hey, ich bin Annika!
Auf meinem Blog gebe ich dir Tipps und Tricks rund um die Themen Website Erstellung, WordPress und Online Marketing.

Die neuesten Blogartikel:

MEIN GRATIS GESCHENK FÜR DICH!

Du willst deine eigene Website erstellen – doch hast keine Ahnung, wie du anfangen sollst? 😰

Keine Panik! In meinem kostenlosen Website Workbook zeige ich dir, wie du deine Website wie ein Profi planst und vorbereitest!
Menü schließen

Nimm jetzt kostenlos teil!

Trage dich jetzt für meinen kostenlosen Newsletter ein und erhalte die Teilnahme an meinem Videotraining geschenkt!
Wähle dafür einfach einen Termin, der dir am besten passt:

Ich nehme den Datenschutz sehr ernst! Mehr erfährst du in meiner Datenschutzerklärung.

In diesem kostenlosen Videotraining zeige ich dir, wie du deine eigene strategische Website erstellst – und zwar selbst, wenn du nie zuvor eine Website erstellt hast!

100% Kostenlos. Das nächste Videotraining findet heute statt!