Plane deine Website wie ein Profi! Sichere dir mein gratis Website Workbook!
Website-Planner-Workbook

Steht deine Website schon viel zu lange auf deiner To-Do Liste? 😫💻

Sichere dir mein kostenfreies Website Workbook und plane deine Website wie ein Profi!

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

google-fonts-wordpress
Du willst diesen Artikel später lesen?

Dann sichere dir den Pin jetzt auf Pinterest:

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

MEIN GRATIS GESCHENK FÜR DICH!

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

Von der richtigen Planung hängt ab, ob du dein Ziel erreichst. Sichere dir meinen Website Planer und erstelle eine Website, die deine Traumkunden überzeugt!
Website-Planner-Workbook

In diesem Workbook lernst du:

  • Wie du die perfekten Schriften & Farben für deine Website auswählst
  • Wie du unwiderstehliche Website-Texte schreibst
  • Wie und wo du passende Bilder findest
  • … und Vieles mehr!

Achtung: Das Workbook kostet normalerweise 19€ zzgl. MwSt. und ist nur für kurze Zeit als gratis Geschenk erhältlich!

Du willst diesen Artikel später wiederfinden?

Dann sichere dir den Artikel jetzt auf Pinterest:

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!

Mein Name ist Annika Gievers und ich bin Expertin für strategisches WordPress Webdesign.

In meinem Kreativbüro gestalte und konzipiere ich unwiderstehliche Websites für selbstständige Powerfrauen, die mit ihren Leistungen und Angeboten auffallen wollen.

Die neuesten Blogartikel:

Menü schließen

Trage dich jetzt in den Newsletter ein und erhalte mein Website Workbook als gratis Geschenk!

Der Newsletter-/E-Mail-Versand erfolgt entsprechend meiner Datenschutzerklärung über den Anbieter ActiveCampaign. Du erhältst Tipps, Tricks und Freebies rund um das Thema Website-Erstellung.
Du möchtest nur das Workbook haben? Hier kannst du es kostenpflichtig bestellen: Workbook für 19€ zzgl. MwSt. bestellen