Google Fonts in WordPress DSGVO-konform einbinden

Google-fonts-einbinden
Inhalt

Am 25. Mai 2018 wurde die Datenschutz-Grundverordnung in Kraft gesetzt. Seitdem müssen Website-Besucher einiges beachten, um die Verordnung einzuhalten. Unter anderem ist eine Datenschutzerklärung Pflicht, Freebies müssen transparenter angeboten werden und Google Fonts sollten besser nicht mehr via Google Server eingebunden, sondern lokal auf der Website gehostet werden. Ich zeige Dir in diesem Beitrag, wie Du Google Fonts in WordPress DSGVO-konform einbindest.

Warum ist das direkte Einbinden von Google Fonts »verboten«?

Die Google-Fonts liegen auf einem Server in den USA. Um die gewünschte Schriftart zu nutzen, wird diese über einen Google-Server geladen und eine Verbindung hergestellt. Das ausschlaggebende dabei ist, dass Deine IP-Adresse an Google gesendet wird. Wenn Du Google Fonts also auf Deiner Website nutzt, wird bei jedem Besucher auf Deiner Website eine Verbindung hergestellt und die IP-Adresse an Google versendet.

Laut Google werden hierbei zwar keine Cookies gesetzt und es sollte reichen die Google Fonts in der Datenschutzerklärung zu erwähnen. Allerdings gab es bereits Abmahnungen in Bezug auf die Google Fonts. Darum empfehle ich Dir Google Fonts in WordPress DSGVO-konform einzubinden und Deine Schriftarten lokal auf Deinem Server zu speichern.

Werden Google Fonts auf meiner Seite geladen?

Google-SourcesDie meisten Themes binden Google Fonts ein. Ob es bei Dir auch so ist, kannst Du ganz einfach herausfinden. Wenn Du Google Chrome als Browser nutzt, klicke die rechte Maustaste und anschließend auf Untersuchen. Es öffnet sich rechts im Browser ein Fenster. Wenn Du hier auf Sources klickst, findest Du die Zeile fonts.googleapis.com, wenn Deine Seite Google Fonts verwendet.

So bindest Du Google Fonts in WordPress DSGVO-konform ein:

1. Erstelle ein Child-Theme

Ein Child-Theme ist wichtig, da Du in den nächsten Schritten Änderungen am Theme vornehmen wirst. Wenn Du diese im Haupt-Theme machen würdest, würden diese Änderungen beim nächsten Update überschrieben werden und Du müsstest von vorn beginnen.

Mit einem WordPress Child-Theme kannst Du Dein Haupt-Theme ganz normal aktualisieren, aber die Änderungen des Child-Themes bleiben auf der Website sichtbar. Wie Du solch ein Child-Theme korrekt erstellst, kannst Du in meinem Beitrag „So erstellst Du ein WordPress Child Theme“ nachlesen.

2. Download Deiner Google Fonts

Im nächsten Schritt suchst Du die Schriftarten, die Du nutzt unter Google Fonts und lädst sie dort herunter.

CSS-Font-einbinden

3. Upload der Dateien auf Deinen Server

Wenn Du alle Schriftarten zusammengesucht hast, packe sie in einen Ordner und nenne diesen Ordner fonts. Dieser muss im Anschluss auf Deinen Server geladen werden. Hierzu nutzt Du einen FTP-Client, ich empfehle Dir FileZilla. Deine FTP-Zugangsdaten erhältst Du von Deinem Hosting-Anbieter, falls Du sie bis jetzt nicht kennst.

Lade dann den fonts Ordner im Child-Theme auf Deinen Server.

4. Anpassung Deines CSS

Die gewählten Schriftarten müssen nun noch in Deinem Stylesheet eingebunden werden. Dieses kannst Du ebenfalls mithilfe von FileZilla herunterladen. Dann bearbeitest Du den Code mit einem Editor, z. B. Textwrangler und lädst die Datei anschließend wieder hoch.

Oben im Screenshot siehst Du bereits den Code, den Du dafür nutzt. Dieser lässt sich mit einem Klick auf den Code kopieren und dann in Dein Sheet einfügen.

Achte darauf, dass wenn Du wie empfohlen einen Fonts-Ordner erstellt hast, dass Du die Pfade anpasst. Ansonsten findet der Code die Dateien auf Deinem Server nicht. Hierzu nutzt Du das Feld „Customize folder prefix“ unterhalb des Codes. Der Code aktualisiert sich automatisch, sobald Du dort Text einfügst.

5. Verbindung zum Google Server entfernen

Zum Abschluss musst Du noch die Verweise zum Google-Server und den dort liegenden Google-Fonts entfernen. Das kannst Du mit einem Plug-in machen. Hier funktioniert zum Beispiel Disable Google Fonts. Auch mithilfe des Plug-ins Autoptimize, welches viele Website-Besitzer bereits nutzen, ist die Entfernung in den Einstellungen unter Extras möglich.

Prüfung

Wenn Du diesen letzten Schritt getan hast, solltest Du das Ganze noch einmal testen. Klicke dazu wieder mit rechts auf Deine Website und auf Untersuchen. Im Sources Bereich sollten die Google Fonts nun nicht mehr zu sehen sein.

Ich hoffe, ich konnte Dir mit dieser Schritt-für-Schritt-Anleitung weiterhelfen, damit Du zukünftig Google Fonts in WordPress DSGVO-konform einbindest.

Buchen Sie Ihr kostenloses Beratungsgespräch
Buchen Sie Ihr kostenloses Beratungsgespräch