Google Fonts lokal einbinden macht richtig viel Sinn! Seit Mai 2018 ist die EU-Datenschutz-Verordnung gültig und seit dem hat kein Webdesigner mehr eine Ausrede, die Google Fonts nicht DSGVO konform in die Websites einzubinden. Denn wenn Sie Google Fonts standartmäßig eingebunden haben, dass heißt diese werden über eine Verbindung zu Google US-Servern nachgeladen, werden unter anderem persönliche Daten wie der verwendete Browser oder die IP-Adresse Ihres Besuchers ohne Zustimmung direkt an Google übermittelt. Und dies ist nicht DSGVO-konform!
Update Januar 2022
Am 20.01.2022 hat das LG München in einem Urteil festgestellt, dass die standardmäßige Einbindung von Schriften über Google-Servern nicht datenschutzkonform ist. Aus diesem Grund sollten Sie die Fonts lieber lokal auf Ihrem Server einbinden oder auf Systemfonts wie Arial, Helvetica oder Verdana umsteigen.
Die DSGVO hat uns Webdesigner bereits seit 2018 fest im Griff. Ganz gleich ob wir sie hassen oder lieben – eines ist ganz klar: Wir müssen uns daran halten, denn sollte es zu einer Abmahnung kommen, gilt der Spruch „Ich habe das alles gar nicht gewusst“. Und seit einer Website-Betreiberin mit oben erwähntem Urteil eine Schadensersatzzahlung auferlegt wurde, werden massenhaft Abmahnungen und Schadensersatzforderungen und Website-Betreibende herausgesendet.
Aber keine Panik: Denn mit einer kleinen Umstellung können Sie eine Abmahnung und Schadensersatzforderungen vermeiden. Dafür müssen Sie aktiv werden und Ihre Google Fonts lokal einbinden. Dies bedeutet, dass sie Schriften nicht mehr über die Server von Google geladen werden, sondern dass Sie diese lokal in Ihre Website einbinden und über Ihren eigenen Server laden. Im Folgenden zeige ich Ihnen wie Sie herausfinden, ob Ihre Website überhaupt Google Fonts lädt und wie Sie diese lokal einbinden können.
2 Wege mit denen Sie herausfinden, ob Sie Google Fonts verwenden
Im ersten Moment stellen sich Ihnen gleich zwei Fragen: Verwende ich für meine Website überhaupt Google Fonts und falls ja, besteht überhaupt Handlungsbedarf? Wenn Sie Ihre WordPress Website selber erstellt haben, wird Ihr ausgewähltes Theme oder eines der Plugins mit hoher Wahrscheinlichkeit Google Fonts standardmäßig über Google Server laden. Sollten Sie einen unserer vielen Kollegen beauftragt haben, hängt dies natürlich davon ab, ob dieser Google Fonts lokal eingebunden hat. Damit Sie schnell eine Antwort auf die beiden Fragen erhalten, stelle ich Ihnen im Folgenden zwei Wege vor:
1) Google Fonts überprüfen mit der Entwicklerkonsole Ihres Browsers
Ob Sie Google Fonts lokal einbinden können Sie mit wenigen Klicks in Ihrem Browser feststellen. Im ersten Schritt öffnen Sie dazu die Entwicklerkonsole Ihres Browsers. Dies gelingt Ihnen entweder über die Taste F12 oder mit einem Rechtsklick und dem Menüpunkt „Untersuchen“. In beiden Fällen öffnet sich jetzt die Entwicklerkonsole des Browsers. Mit einem Klick auf den Reiter „Quellen“ bzw. „Sources“ erfahren Sie ob Sie Google Fonts lokal einbinden oder diese über Google Server nachladen. Finden Sie, wie in der nachfolgenden Grafik, in der linken Spalte die Ordner „fonts.googleapis.com“ oder „fonts.gstatic“ dann lädt Ihre Website die Schriften über einen Google Server.
Wenn Sie jetzt weitere Informationen haben möchten, wie z. B. welche Fonts genau geladen werden und über welche Wege, wechseln Sie in den Tab „Network“ bzw. „Netzwerk“. Um sehen zu können, welche Dienste alle geladen werden, müssen Sie einmal die Website aktualisieren. Anschließend wählen Sie im Menü den Punkt „Fonts“ aus und Sie erhalten zu jedem Ihrer geladenen Fonts eine genaue Angabe, über welche Dienste bzw. Server diese geladen werden. In meinem Fall werden die Google Fonts lokal eingebunden.
2) Google Fonts Checker nutzen
Als im Frühjahr 2022 die Abmahnwelle bzgl. nachgeladener Google Fants begann, haben einige Diensteanbieter wie e-Recht24 und Sicher3 schnell gehandelt und kostenfreie Google Fonts Checker zur Verfügung gestellt. Hierzu rufen Sie einfach eine der beiden folgenden Domains auf, geben dort Ihre Website Adresse ein und erhalten kostenfrei binnen Sekunden eine Rückmeldung, ob Ihre Website Schriften über Google Server nachlädt.
Wenn Sie jetzt die Meldung bekommen, dass Sie Schriften über Google Server laden, verzweifeln Sie auf keinen Fall. Im weiteren Verlauf gebe ich Ihnen die Anleitung mit, wie Sie Google Fonts lokal einbinden und DSGVO konform auf Ihrer WordPress Website verwenden können. Wenn Sie dies jedoch lieber in professionelle Hände abgeben wollen, übernehme ich dies sehr gerne für Sie.
Google Fonts lokal einbinden – X Schritte zur DSGVO konformen Nutzung
Google Fonts lokal einbinden hört sich im ersten Moment viel komplizierter an, als es wirklich ist. Sollten Unklarheiten entstehen kontaktieren Sie mich sehr gerne oder hinterlassen Sie einfach einen Kommentar unter diesem Beitrag. So können andere Website-Betreiber ebenfalls davon profitieren.
Wichtig: Je nach WordPress Theme können unterschiedliche Lösungen zum Ziel führen. Beispielsweise sowohl das Premium Theme Divi von Elegantthemees(*) als auch die Pro Version des Pagebuilders Elementor bieten direkte Uploads für eigene Fonts. Da ich bei tausenden von WordPress Themes nicht auf jedes einzelne Theme eingehen kann, stelle ich Ihnen hier eine universale Lösung vor, die für alle WordPress Websites funktioniert.
Im vorherigen Abschnitt haben Sie über einen der beiden erwähnten Wege bereits herausgefunden, welche Google Fonts sie auf Ihrer Website verwenden. Nun müssen diese über Ihre WordPress Website eingebunden werden.
Schritt 1 – Google Fonts downloaden
Über den Google Webfonts Helper können Sie Google Fonts direkt herunter laden. Dazu suchen Sie im Menü links nach der Schrift, welche Sie aktuell auf Ihrer Website verwenden. Nachdem Sie die entsprechende Schrift ausgewählt haben, erhalten Sie im rechten Fenster einige Optionen zum auswählen.
Wählen Sie unter Punkt 2 die entsprechenden Schriftstärken aus, kopieren Sie sich den CSS Code in eine Text-Datei (oder lassen Sie das Fenster geöffnet), denn diesen benötigen Sie in Schritt 3, und laden anschließend unter Punkt 4 die ZIP-Datei für Ihre Schriftart herunter.
Schritt 2 – Fonts via FTP Server hochladen
Der nächste Schritt um Google Fonts lokal einbinden zu können ist, dass Sie die heruntergeladenen Schriften auf Ihren Server hochladen. Um dies erledigen zu können, müssen Sie den ZIP-Ordner mit den Fonts entpacken. Anschließend benötigen Sie Zugriff auf Ihren Server. Hierzu haben Sie zwei Möglichkeiten: Die meisten Hosting-Anbieter bieten im Backend einen WebFTP Zugang an. Dieser langt für den Upload der Font-Dateien voll aus. Die zweite Möglichkeit ist ein FTP Programm wie z. B. FileZilla, welches auf Ihrem Computer installiert wird.
Wenn Sie über FileZilla oder den WebFTP Zugang Ihres Hosters auf Ihrem Server eingeloggt sind, öffnen Sie das Hauptverzeichnis Ihrer Domain. Dort wählen Sie anschließend den Ordner WordPress aus und fügen dort einen neuen Ordner mit dem Titel „fonts“ (Ohne Satzzeichen!) ein. In diesen Ordner laden Sie alle entpackten Dateien hoch. Dies dürfte am Ende etwa wie folgt aussehen:
Schritt 3 – CSS Code einfügen
Damit Browser auch wissen, wo sich Ihre hochgeladenen Schrift-Dateien befinden, müssen sie Ihnen dies per CSS sagen. Dazu benötigen Sie den CSS Code aus dem Google Webfonts Helper (Schritt 1).
Um den CSS Code einzufügen, loggen Sie sich in Ihre WordPress Website ein und wählen Sie im Backend den Menüpunkt „Design“ -> „Theme Design Editor“ und dort die Datei style.css aus. Alternativ können Sie die Datei auch über den FTP Zugang herunterladen, auf ihrem Computer anpassen und erneut hochladen.
In diese Datei fügen Sie den zuvor abgespeicherten CSS Code für Ihre Schriftdateien ein. Sollten Sie mehrere Schriftarten-, schnitte oder -stärken verwenden, müssen Sie die einzelnen Code-Abschnitte untereinander einfügen. Dies sollte jetzt in etwa wie folgt bei Ihnen ausschauen:
Herzlichen Glückwunsch – Die Mission: Google Fonts lokal einbinden ist hiermit erfolgreich durchgeführt. Jedoch sind Sie noch nicht komplett fertig. Es besteht schließlich immer noch eine Verbindung zwischen Ihrer Website und den Google Servern. Diese müssen Sie im letzten Schritt noch deaktiveren.
Schritt 5 – Alle Google Verbindungen unterbinden
Damit Sie Google Fonts lokal einbinden und DSGVO konform nutzen können, müssen Sie in diesem Schritt noch die Verbindung zu Google Servern unterbinden. Damit Sie auf keinen Fall unabsichtlich wichtige Zeilen aus dem Quellcode Ihrer Website löschen, empfehle ich Ihnen an dieser Stelle den einfachsten und schnellsten Weg über das OMGF Plugin. Mit diesem können Sie in wenigen Klicks alle Verbindungen zu Google Servern unterbinden.
Nachdem Sie das Plugin installiert und aktiviert haben, öffnen Sie dessen Einstellungen und führen im ersten Schritt den Scan durch. Anschließend erhalten Sie eine Liste aller über Google geladenen Fonts. Mit einem Häkchen unter dem Punkt „Don’t Load“ können Sie die Verbindung zu Google Servern deaktivieren.
Geschafft! Jetzt sollte Ihre Website keinerlei Schriften mehr über Google Server laden. An dieser Stelle sollten Sie dies jedoch noch einmal manuell überprüfen. Entweder über die Entwicklerkonsole Ihres Browsers oder über eines der oben genannten Google Font Checker Angebote.
Wichtiger Hinweis zu Google Diensten:
Google Services wie z. B. Youtube oder GoogleMaps laden IMMER Google Fonts nach. Wenn Sie diese Angebote weiterhin nutzen möchten, müssen diese mit einem Contentblocker DSGVO konform in die Website eingebunden werden. Alternativ können Sie hier jedoch auch auf DSGVO konforme Tools wechseln. Wenn Sie in diesem Zusammenhang Unterstützung benötigen, können Sie gerne mit uns einen Termin vereinbaren.
0 Kommentare