Hier findest du eine Schritt-für-Schritt Anleitung, wie du Google Fonts ohne datenschutzrechtliche Probleme integrieren kannst.
Google Fonts ist eine tolle Methode um die Qualität der Inhalte auf deiner Website zu verbessern und dabei gleichzeitig den Content zu personalisieren. Allerdings birgt das Einbinden von Google Fonts auch einige Risiken, da es hier um personenbezogene Daten geht.
LG MÜNCHEN: GOOGLE FONTS OHNE EINWILLIGUNG DATENSCHUTZWIDRIG
Im Urteil vom 20.01.2022 hat das LG München (siehe Az. 3 O 17493/20) entschieden, dass eine Einbindung von Google Fonts, trotz Berufung auf ein berechtigtes Interesse, datenschutzwidrig ist. Google Fonts Einbindungen via fonts.gstatic.com sowie fonts.googleapis.com sollten daher umgehend blockiert und durch eine lokale Einbindung ersetzt werden.
Wie kann ich überprüfen, ob meine Website Google Fonts verwendet?
Du kannst dir im Video anschauen, wie du deine Website auf Google Fonts Einbindungen überprüfen kannst. In unserem Beispiel wählen wir „Inspect“ im Kontextmenü. Dieses Menü heißt bei dir eventuell auch „Element untersuchen“ oder „Untersuchen“.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von Vimeo.
Mehr erfahren
Borlabs Font Blocker installieren
Borlabs Font Blocker ist ein großartiges Werkzeug, um die Schriftarten auf Ihrer Website zu blockieren und sicherzustellen, dass nur die Schriftarten angezeigt werden, die Sie möchten. Folgen Sie einfach den unten stehenden Anweisungen, um Borlabs Font Blocker zu installieren und Ihre Website zu überprüfen.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von Vimeo.
Mehr erfahren
Wie kann ich Google Fonts lokal einbinden?
Wir empfehlen dazu ein Child-Theme anzulegen und dieses Tool zum Herunterladen der Google Fonts zu verwenden: https://google-webfonts-helper.herokuapp.com/ Für unser Beispiel verwenden wir WP Page Builder Framework, das Vorgehen ist aber für alle Themes identisch.
Schritt 1: Plugin “Generate Child Theme” installieren
Im Video laden wir als Erstes das Plugin „Generate Child Theme“ herunter, um das Child-Theme zu erstellen. Theoretisch lässt sich das auch ohne Plugin erledigen – das dauert jedoch länger und erfordert FTP-Zugriff. Generate Child Theme kann am Ende auch wieder gelöscht werden.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von Vimeo.
Mehr erfahren
Schritt 2: Google Fonts herunterladen
Im zweiten Video laden wir die Schriftart mithilfe von https://google-webfonts-helper.herokuapp.com/fonts/ herunter. Wir werden viel mit Copy&Paste (STRG + C und STRG + V unter Windows, CMD + C und CMD + V unter macOS) arbeiten, zu sehen an den eingeblendeten Buchstaben.
Schritt 3: Upload in die WordPress Medienverwaltung
Nachdem wir die .zip-Datei mit unseren Schriftarten heruntergeladen haben, entpacken wir die .zip-Datei und laden den Ordner über die WordPress Medienverwaltung hoch.
Schritt 4: Pfad zu den Dateien
Anschließend ermitteln wir den Pfad zu den Dateien, da dieser noch einmal für das Google-Font-Tool benötigt wird.
Schritt 5: CSS Code erstellen und in Child-Theme einfügen
Im Google-Font-Tool ersetzen wir im Feld das „../fonts/“ durch unseren Pfad und kopieren anschließend das CSS. Dieses fügen wir anschließend in die style.css unseres Child-Themes ein – fertig!
Schritt 6: Prüfe deine Website mit dem Google-Fonts-Checker
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von Vimeo.
Mehr erfahren
Anmerkung: Normalerweise laden Schriftarten nicht über die Medien-Verwaltung hoch, sondern in den Child-Theme-Ordner. Da viele mit der Einrichtung eines FTP-Programms jedoch überfordert sind, haben wir uns entschieden zu zeigen, wie es ohne Programm möglich ist. Wenn mehrere unterschiedliche Schriftarten verwendet werden, kann der Vorgang einfach wiederholt werden.
