Google Fonts lokal einbinden macht richtig viel Sinn! Seit Mai 2018 ist die EU-Datenschutz-Grundverordnung (kurz: EU-DSGVO) gültig und mit dieser hat kein Website Betreiber mehr eine Ausrede, die Google Fonts nicht DSGVO konform in die Websites einzubinden. Denn wenn du deine bisher verwendeten Google Fonts standartgemäß in deiner Website eingebunden hast, dass heißt diese werden mit einer Verbindung zu Google’s US-Servern nachgeladen, werden unter anderem personenbezogene Daten wie der verwendete Browser oder die IP-Adresse deines Website Besuchers ohne Zustimmung direkt an Google übermittelt. Und genau 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 Website Betreiber, Webdesigner und WordPress Experten bereits seit 2018 fest im Griff. Ganz gleich ob wir sie hassen oder lieben – eines ist glasklar: Wir müssen uns daran halten, denn sollte es einmal zu einer Abmahnung kommen, kommst du mit einem „Aber ich hab das doch alles gar nicht gewusst“ nicht aus der Sache raus. Und seit einer Website Betreiberin mit dem oben erwähnten Urteil eine Schadensersatzforderung auferlegt wurde, werden aktuell massenhaft Abmahnungen und Schadensersatzforderungen an Website Betreibende herausgesendet.
Aber jetzt bloß keine Panik: Mit einer kleinen Umstellung kannst du deine derzeit verwendeten Google Fonts lokal einbinden und so Abmahnungen und Schadensersatzforderungen direkt vermeiden. Dies bedeutet, dass du die Fonts nicht mehr über eine Verbindung zu Google’s US-Servern nachlädst, sondern deine Google Fonts lokal über deinen eigenen Server einbindest.
In diesem Artikel zeige ich dir im ersten Schritt, wie du herausfindest, ob du überhaupt Google Fonts verwendest und falls ja: Welche Fonts dies sind. Falls du dies bereits weißt, spring gerne zum zweiten Abschnitt in dem ich dir zwei Möglichkeiten aufzeige, mit denen du in WordPress Google Fonts lokal einbinden kannst.
2 Wege mit denen du herausfindest, ob du Google Fonts in deiner WordPress Website verwendest
Stellt sich dir gerade die Frage: „Moment mal, verwende ich überhaupt Google Fonts in meiner Website und falls ja, besteht überhaupt Handlungsbedarf?“ Zu nächst einmal: Wenn du deine Website mit WordPress selbst erstellt hast, wird dein ausgewähltes Theme oder eines der installierten Plugins mit hoher Wahrscheinlichkeit standardgemäß Google Fonts über Google Server nachladen. Solltest du eine Kollegin oder einen Kollegen mit der Erstellung deiner WordPress Website beauftragt haben, hängt es stark von der Arbeitsweise der jeweiligen Person ab, ob diese Google Fonts lokal eingebunden hat.
Damit du schnell eine Antwort auf die beiden Fragen erhältst, stelle ich dir im Folgenden zwei Wege vor, mit denen du in wenigen Minuten herausfindest, ob du Google Fonts verwendest und ob von deiner Seite aus Handlungsbedarf besteht. Also lass uns keine Zeit verschwenden:
1. Google Fonts Checker nutzen
Als im Frühjahr 2022 die Abmahnwelle bzgl. nachgeladener Google Fonts begann, haben einige IT-Dienstleister wie z. B. die IT-Rechtskanzlei eRecht24 und die IT-Dienstleister von sicher3 schnell gehandelt und kostenfreie Google Fonts Checks auf ihrer Website zur Verfügung gestellt. Mit diesen kannst du in wenigen Sekunden herausfinden, ob du Google Fonts nachlädst.
Kommt als Ergebnis, dass deine Website abmahngefährdet ist? Dann bitte jetzt auf keinen Fall verzweifeln! Im weiteren Verlauf dieses Blogbeitrags erkläre ich dir, wie du diese Google Fonts lokal einbinden kannst und deine Website in diesem Punkt abmahnsicher machst!
Wichtig bei den Fonts Scannern bzw. Checkern: Du musst jede Unterseite deiner Website einzeln überprüfen.
2. Google Fonts über die Entwicklerkonsole deines Browsers überprüfen
Ob du bereits Google Fonts lokal einbinden tust, kannst du auch über die Entwicklerkonsole deines Browsers überprüfen. Diese kannst du öffnen, in dem du mit der rechten Maustaste den Menüpunkt „Untersuchen“ (je nach Browser kann die Bezeichnung leicht abweichen) auswählst oder bei geöffnetem Browserfenster einfach die Taste F12 betätigst.
In beiden Fällen öffnet sich jetzt (meistens unten oder rechts am Browser, manchmal in einem neuen Fenster) die Entwicklerkonsole. Mit einem Klick auf „Quellen“ oder „Sources“ erfährst du direkt, ob du Google Fonts lokal einbinden tust oder ob diese über eine Verbindung mit einem US Server nachgeladen werden. Findest du, wie im nachfolgenden Screenshot, die Bezeichnungen die Ordner „fonts.googleapis.com“ oder „fonts.gstatic.com“ dann lädt deine Website definitiv deine Fonts definitiv über einen US-Server nach.
Wenn du jetzt weitere Informationen zu den verwendeten Fonts deiner Website haben möchtest, wie z. B. über welche Wege (WordPress Theme, Plugins, eingebettete HTML-Codes, …) und welche Fonts genau extern nachgeladen werden, wechselst du in der Entwicklerkonsole in den Tab „Network“ bzw. „Netzwerk“ und wählst hier den Punkt „Fonts“ aus. Damit du Ergebnisse siehst, musst du die entsprechende Seite einmal neu laden (Rechte Maustaste & Neu laden klicken oder einfach F5 drücken). Anschließend erhältst du zu jeder geladenen Font eine genaue Angabe, ob diese extern geladen wird oder ob du bereits Google Fonts lokal einbinden tust.
Erfolgreich Google Fonts lokal einbinden, sieht dann in etwa so aus, wie bei dem nachfolgenden Screenshot meiner WordPress Agenturseite Wegweiser Marketing, bei der die Google Fonts lokal eingebunden sind bzw. über das lokal installierte Plugin Autoptimize geladen werden.
Sollten an dieser Stelle jedoch Verweise auf URLS mit Google.com auftauchen, besteht bei deiner Website definitiv Handlungsbedarf! Falls du dich da nicht selber drum kümmern willst, übernehme ich dies sehr gerne für dich.
Google Fonts lokal einbinden – Einfache Schritte zur DSGVO konformen Nutzung!
Im ersten Moment hört sich Google Fonts lokal einbinden schrecklich komplizierter an, als es in Wahrheit ist. In den folgenden Schritten führe ich dich durch die einzelnen Schritte. Sollten dennoch Unklarheiten auftauchen, hinterlasse gerne einen Kommentar unter diesem Post oder komm in meine Facebook Gruppe, dem Webdesign Woman Club. So können auch andere Website-Betreiberinnen von deinen Herausforderungen beim Google Fonts lokal einbinden profitieren.
Wichtig: Je nach WordPress Theme können unterschiedliche Lösungen zum Ziel führen. Beispielswiese sowohl das Premium Theme Divi von ElegantThemes(*), als auch die ProVersion des Plugins Elementor(*) bieten direkte Uploads für eigene Fonts. Da ich bei über tausend WordPress Themes nicht auf jedes einzelne Theme eingehen kann, stelle ich dir hier zwei universelle Lösungen vor, die in der Regel mit jedem Theme funktionieren sollten.
Im vorherigen Abschnitt hast du bereits herausgefunden, welche Fonts du von Google verwendest. Wenn du jetzt nicht unbedingt auf die Standard Webfonts wie Arial, Helvetica und Verdana zurückgreifen willst, müssen wir die verwendeten Google Fonts lokal einbinden.
Schritt 1 – Google Fonts herunterladen
Der erste Schritt um Google Fonts lokal einbinden zu können ist, dass du diese Schriften erst einmal bei Google downloaden musst. Hierzu empfehle ich dir den Google Webfonts Helper. Gib auf der Seite oben links einfach den Namen deiner Font ein und du erhältst im rechten Fenster der Website einige Optionen zum auswählen.
Unter Punkt 2 wählst du genau die Schriftstärken aus, die du für deine Website benötigst. Anschließend kopierst du dir den CSS Code am besten in ein leeres Dokument oder du lässt das Fenster einfach geöffnet. Je nachdem welche Lösung du wählst, brauchst du den Code im nächsten Schritt!
Zum Schluss lädst du unter Punkt 4 die ZIP Datei der Font herunter.
Diesen Schritt wiederholst du mit allen Google Fonts, die du auf deiner Website lokal einbinden willst.
Schritt 2 – Google Fonts auf deiner Website hochladen
Um die entsprechenden Google Fonts lokal einbinden zu können, musst du die heruntergeladenen ZIP-Ordner entpacken. Im nächsten Schritt stehen dir jetzt zwei verschiedene Wege zur Verfügung. Einmal über das Plugin Custom Fonts oder über den Weg, die Fonts per FTP Server hochzuladen. Ich zeige dir einfach beide.
2.1 – Google Fonts lokal einbinden via Plugin
Der einfachste und schnellste Weg ist über das Plugin Custom Fonts. Sobald dieses installiert und aktiviert ist, kannst du im Backend unter Design -> Custom Fonts deine Schriftdateien hochladen.
2.2 – Google Fonts lokal einbinden via FTP Server
Alternativ zum Weg über das Custom Fonts Plugin, kannst du Google Fonts lokal einbinden, in dem du die Fonts über deinen FTP Server hochlädst. Für den einfachen Upload der Google Fonts Dateien reicht in der Regel der WebFTP Zugang über den Login Bereich deines Hosters. Eine weitere Option wäre ein FTP Programm, wie z. B. FileZilla, welches auf deinem Computer installiert wird.
Bist du über FileZilla oder den WebFTP Zugang deines Hosters auf deinem Server eingeloggt, öffnest du im ersten Schritt das Hauptverzeichnis deiner Domain. Dort legst du einen Ordner mit dem Titel „fonts“ (ohne die Anführungszeichen) an und lädst in diesen ALLE entpackten Schriftdateien hoch.
Dies dürfte am Ende in etwa so ausschauen:
CSS Code einfügen (nur bei Upload über den FTP Server notwendig!)
Damit die Browser deiner Websitebesucher auch wissen, wo sie deine hochgeladenen Schriftdateien auf deinem Server finden, musst du ihnen dies via CSS mitteilen. Hierzu benötigst du den CSS Code aus Schritt 1.
Wichtig bei diesem Schritt ist, dass du unbedingt mit einem Child Theme von deinem Theme arbeitest. Änderst du die style.css Datei im originalen Theme, können diese Änderungen mit dem nächsten Update überschrieben werden.
Um den CSS Code einzufügen, logge dich in dein WordPress Backend ein, wähle den Menüpunkt „Design“ –> „Design Editor“ und dort die Datei style.css aus. Alternativ kannst du die Datei auch über deinen FTP Server herunterladen, auf deinem Computer anpassen und anschließend erneut hochladen.
In diese Datei fügst du jetzt den zuvor abgespeicherten CSS-Code ein. Solltest du mehrere Fonts, Schriftstärken oder -Schnitte hochgeladen haben, füge die einzelnen Codes einfach untereinander in die Datei ein.
Wenn du fertig bist, sollte die style.css Datei in etwa wie folgt ausschauen:
Herzlichen Glückwunsch: Die Mission ‚Google Fonts lokal einbinden‘ wurde erfolgreich gemeistert. Jedoch bist du noch nicht komplett fertig. Auch wenn die Fonts lokal geladen werden, besteht zu diesem Zeitpunkt immer noch eine Verbindung zwischen deiner Website und den Google US-Servern. Eventuell existieren sogar noch einige Plugins, die aktiv Google Fonts nachladen.
Schritt 3 – Alle Google Fonts Verbindungen unterbrechen
Damit du Google Fonts lokal einbinden und DSGVO konform nutzen kannst, musst du in diesem Schritt noch die Verbindung zu Google unterbinden. Damit du nicht unbedingt in den Quellcodes der einzelnen Themes und Plugins suchen musst und im Worst Case wichtige Codezeilen löschst, empfehle ich dir den einfachsten und schnellsten Weg über das Plugin OMGF. Mit diesem kannst du mit wenigen Klicks alle Verbindungen zu Google Servern unterbinden.
Nachdem du das Plugin installiert und aktiviert hast, öffnest du dessen Einstellungen und führst im ersten Schritt den Scan durch. Im Anschluss erhältst du eine Liste mit allen über Google nachgeladenen Fonts. Mit einem Häkchen unter dem Punkt „Don’t Load“ kannst du die Verbindung zum Google Server deaktivieren.
Geschafft! Jetzt sollte deine Website keinerlei Schriften mehr über Google US-Server nachladen. An dieser Stelle solltest du dies jedoch noch einmal unbedingt manuell (siehe den ersten Abschnitt des Beitrags) nachprüfen.
Wichtiger Hinweis zu weiteren Google Diensten:
Weitere Google Services, wie z. B. Google Maps oder Youtube, laden grundsätzlich IMMER Google Fonts nach. Wenn du diese Angebote unbedingt in deine Website integrieren willst, achte unbedingt darauf, dass diese Inhalte immer DSGVO konform erst nach Zustimmung des Websitebesuchers geladen werden. Alternativ kannst du auch auf DSGVO konforme Tools umsteigen.
0 Kommentare