Google Fonts in 7 Schritten DSGVO-konform in WordPress nutzen

Wenn du Google Fonts für deine Webseite nutzen möchtest solltest du sie lokal einbinden, da sie sonst eine Verbindung zum Google Server aufbauen was deine Seite nicht mehr DSGVO -konform nutzbar macht.

Daher zeige ich dir in 7 einfachen Schritten wie du Google Fonts DSGVO-konform nutzen kannst.

Google Fonts und die DSVGO – Wieso sind Google Fonts für die DSGVO wichtig?

Google Fonts nutzt keine Cookies. Dennoch erfasst Google deine IP-Adresse, wenn ein Font (=Schriftart) vom Browser angefordert wird. Zudem erfasst Google bei jedem Verbindungsaufbau zum Google Server Browser- und Gerätdaten.

Bei diesen Daten handelt es sich um personenbezogene Daten.

Laut DSGVO müssen Nutzer erst informiert werden und dann zustimmen bevor ihre persönlichen Daten verarbeitet werden dürfen.

In den Google AGB zur Google Font API findest du, wie deine Daten genau erfasst werden.

Warum kann ich mir nicht einfach eine Einwilligung holen?

Da Google Fonts in Kontakt mit dem Google Server steht damit die gewünschten Schriftarten geladen werden können müsste die Einwilligung direkt beim laden der Webseite erfolgen.

Doch auch damit ist es leider nicht getan denn die Informationen die Google bereit stellt reichen nicht aus (Zu welchem Zweck werden die Daten verarbeitet? Wie lange werden die Daten gespeichert?) um laut Datenschutz-Grundverordnung eine informierte Einwilligung eunzuholen.

Die einzige Möglichkeit: Google Fonts DSVGO konform lokal einbinden

Anstatt die Schriften vom Google Server zu laden, kannst du diese auch lokal auf deinem eigenen Server speichern. So kannst du Google Fonts nutzen ohne das eine Verbindung zum Google Server aufgebaut werden muss.

Du umgehst somit den Google Server und Google kann keine Daten sammeln.

Auch wenn diese Methode einige kleinere Nachteile mit sich bringt wie:

• längere Ladezeiten
• Fallback-Font bis Google Font geladen ist

empfehle ich dir dringend Google Fonts lokal einzubinden wenn du auf deiner Seite Google Fonts nutzen willst.

Am Beispiel von WordPress will ich dir alle notwendigen Schritte zeigen um Google Fonts lokal zu nutzen.

1. Finde heraus, welche Google Fonts du nutzt

Im ersten Schritt solltest du erst einmal herausfinden welche Google Fonts für dein verwendetes Theme überhaupt benötigt werden. Daher ist notwendig herauszufinden, welche Google Fonts für deine Webseite geladen werden.

Theme-Optionen

Je nach Theme kannst du in den Theme Optionen herausfinden welche Google Fonts dein Theme benötigt.

Schaue dazu im WordPress-Adminbereich nach.

Die Einstellungen für die Google Fonts kannst du hier finden:

• in einem eigenen Menüpunkt
• in einem Unterpunkt von Design oder Einstellungen
• unter Design > Customizer

Je nach Theme können die gesuchten Optionen oder Punkte Typografie, Typography, Fonts oder Schriftarten heißen.

Wenn du die Einstellungen gefunden hast schreibst du dir auf, welche Google Fonts genau verwenden werden und in welcher Stärke (100, 200, 300, 400, 500, 600, 700, 800, 900, normal, bold etc.).

Plugins

Auch einige Plugins laden Google Fonts und binden diese so ein.

Hier einige Beispiele von Plugins die Google Fonts laden:

• Google Maps, reCAPTCHA und einigen anderen Google-Diensten
• Easy Google Fonts
• WP Google Fonts
• NextGEN Gallery (lädt Open Sans)

Bei Plugins die über iframes geladen werden, wie bei Google Maps oder reCAPTCHA bleibt dir nur diese komplett zu entfernen.

Entwickler-Konsole

Du solltest dir immer auch die Entwickler Konsole in deinem Browser anscheuen.In der Entwickler-Konsole siehst du vielleicht zusätzlich, welche Google Fonts geladen werden.

Um die Entwickler Konsole zu öffnen klickst du mit der rechte Maustaste auf deine Webseite und dann klickst du auf „Element untersuchen„.

Jetzt öffnet sich auf der rechten Seite die Entwickler Konsole. Oben in den Reitern klickst du auf Sources, nun siehst du alle Quellen die deine Seite nutzt um Ressourcen zuladen. Darunter auch Google Fonts.

Google Fonts verbergen sich häufig unter folgenden Punkten:

• fonts.googleapis.com
• fonts.gstatic.com

2. Nutze deine Theme Optionen

Bei manchen Themes kannst du in den Theme-Optionen einstellen, dass Google Fonts lokal geladen werden. So sparst du du dir einiges an Arbeit.

Zum Beispiel bei folgenden Themes ist dies möglich:

• Avada (unter Avada > Theme Options > Advanced > Privacy > Google Fonts Mode)
• Divi (eigene Schriftarten nutzen)
• Enfold (eigene Schriftarten nutzen)

Sieh dir auf jeden Fall den Changelog deines Themes an. Viele Entwickler haben ihre Themes im Rahmen der DSGVO angepasst und eine Option hinzugefügt um Google Fonts lokal einzubinden.

System-Fonts nutzen

In vielen Fällen kannst du Google Fonts auch durch durch System-Schriftarten ersetzen. System Schriftarten sind Fonts die sowieso auf jedem System installiert sind (wie zum Beispiel Arial).

Das einbinden von System Schriften statt Google Fonts kommt auch deiner Ladezeit zu Gute.

Natürlich ist es nicht immer möglich oder Sinnvoll Systemschriften zu nutzen. Oft passen diese einfach nicht zu deinem Webseiten Design.

Besonders Serifenlose Schriften, wie z. B. Open Sans oder Roboto lassen sich meist sehr gut ersetzen.Schriftarten mit Serifen lassen sich in den meisten Fällen nicht durch System Schriftarten ersetzen.

Times New Roman und Georgia sind furchtbare Schriftarten, die nicht ins Web gehören.

3. Schriftarten herunterladen

Jetzt musst du die Fonts die du benötigst herunterladen. Am einfachsten geht das mit den Plugin Google Webfonts Helper.

Webfonts Helper läd nicht nur die Schriftarten herunter sondern liefert gleich den CSS Code mit, den du später noch brauchen wirst.

1. Bei select charsets (Charset = Zeichenkodierung) solltest du alles so lassen. Es sei denn dein Blog ist auf Griechisch oder Polnisch
2. Bei select styles wählst du die Stärken aus, die du auf deinem Blog verwenden willst. 700 solltest du immer nehmen, da 700 Fettschrift entspricht. Wenn du das nicht machst, sieht Fettschrift ausgefranst aus
3. Bei Copy CSS wählst du Best Support aus (voreingestellt) und kopierst den CSS-Code heraus
4. Jetzt kannst du das Font-Paket im ZIP-Format herunterladen

4. Auf den FTP-Server hochladen

Hast du das Font-Packet heruntergeladen musst du die Font-Dateien auf deinen FTP-Server hochladen.

Nutze dazu ein FTP-Programm deiner Wahl. Iach nutze seit Jahren FileZilla.

Im Hauptverzeichnis deiner Domain legst du einen Ordner an den du „fonts“ nennst. In den fonts Ordner kopierst du nun die heruntergeladenen Schriftarten hinein.

5. CSS-Code einfügen

Damit die hochbeladenen Schriftarten auch gefunden werden musst du deinem Browser es per CSS mitteilen.

Dzu kopierst du den CSS-Code (Den du in schritt 3 generiert hast), in die style.css-Datei deines Child-Themes.

Verwendest du mehrere Schrifttypen oder Schriftstärken fügst du die Code Abschnitte untereinander ein.

6. Google Fonts entfernen

Du solltest noch Sicherstellen, dass keine Verbindung zum Google Server hergestellt wird.

Die einfachste und sauberste Art dies zu tun ist mittels Plugin. Ich stelle dir die meiner Meinnung nach 2 besten Plugins vor um Google Fonts zu entfernen.

Autoptimize

Autoptimize ist eigentlich ein Plugin um deine Ladezeiten zu verbessern. Doch auch Google Fonts kannst du mit dem Plugin entfernen.

Google Fonts lassen sich dort Einstellungen > Autoptimize > Extras > Google Fonts entfernen

Mit dem Plugin kannst du auch direkt die Emojis entfernen.

Dadurch lädt deine Seite noch einmal schneller.

Remove Google Fonts References

Nicht immer funktioniert die Entfernung der Google Fonts mit Autooptimize

Abhilfe kann das Plugin Remove Google Fonts References schaffen. Dieses Plugin schafft es Google Fonts in 98% aller Fälle zu entfernen.

Auch wenn das Plugin seit längerem nicht mehr aktualisiert wurde funktioniert es noch immer ohne Probleme.

7. Das Ergebnis überprüfen

Zuletzt löschst du den Cache deines Caching-Plugins und von Autoptimize sowie die Dateien in deinem Browser-Cache.

Jetzt kannst du dir deine Website (am besten ausgeloggt) ansehen und die in den Entwickler-Konsole öffnen um zu sehen ob alle Google Fonts lokal laden und keine Verbindung mehr zum Google Server hergestellt wird.

Zusammenfassung

Mit Einführung der DSGVO ist es nötig Google Fonts lokal einzubinden, wenn du Google Fonts für deine Webseite nutzen willst.

Um das zu tun solltest du erst einmal herausfinden welche Google Fonts du überhaupt benötigst. Dann solltest du die benötigten Schriften herunterladen und die heruntergeladenen Dateien auf deinen Server hochlaen.

Nun musst du nur noch per CSS die heruntergeladenen Schriften eingebunden werden.

Lies auch

IP Adressen bei WordPress Kommentaren entfernen

Was ist ein Cookie-Consent Tool?