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

Google-Fonts-Einbinden-WOrdPress

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.

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

Schreibe einen Kommentar

Hey, ich bin Annika!

WordPress Freelancer Annika Gievers

Als WordPress Webdesignerin erstelle ich unwiderstehliche Websites für Selbstständige, die online mit ihren genialen Dienstleistungen und Produkten auffallen und überzeugen wollen.

Aktuelle Artikel

Website Tipps für Selbstständige

Du wünschst dir mehr Erfolg mit deiner Website?
Sichere dir spannende Tipps sowie exklusive Angebote, Checklisten und Freebies, die dir helfen, deinen Website-Erfolg zu maximieren!

Der Newsletterversand erfolgt entsprechend meiner Datenschutzerklärung.
Ich schicke dir ca. 2 – 6 E-Mails pro Monat.

Diese Artikel könnten dir auch gefallen:

Menü schließen