DSGVOGoogleWebdesign

Google Fonts lokal einbinden? Deine Schritt-für-Schritt-Anleitung.

Johannes Schwarz

Website-Macher 🔵 Ich erschaffe Websites & Onlineshops, die den Nutzer begeistern!

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“.

Vimeo

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von Vimeo.
Mehr erfahren

Video laden

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.

https://de.borlabs.io/borlabs-font-blocker/download/

Vimeo

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von Vimeo.
Mehr erfahren

Video laden

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.

Vimeo

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von Vimeo.
Mehr erfahren

Video laden

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 

https://sicher3.de/google-fonts-checker/

Vimeo

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von Vimeo.
Mehr erfahren

Video laden

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.

ähnliche Themen

Pixel, EM, REM, %, VW, VH – Was ist der Unterschied?

Die 20+ besten Webdesign-Programme für die Umsetzung deiner Website