Geschrieben von am 23.05.2018 in Allgemein | Keine Kommentare

Google Webfonts in WordPress datenschutzkonform einbinden

Google Webfonts in WordPress datenschutzkonform einbinden

Die neuen Regelungen zum Datenschutz (DSG-EKD) bringen uns an vielen Stellen dazu Dinge zu hinterfragen und zu prüfen, ob wir immer und überall verantwortungsvoll mit den Menschen und ihren Daten umgehen, mit denen wir täglich zu tun haben. Der westfälische Kollege Bernd Tiggemann brachte mich etwa letzte Woche auf die Frage, ob der Einsatz von „Google Webfonts“, mit den datenschutzrechtlichen Bestimmungen konform ist. Und auch die örtliche Datenschutzbeauftragte für die landeskirchlichen Einrichtungen der EKiR rät vom Einsatz der Google Webfonts in ihrer bekannten Form ab.

In der Tat ist es so, dass nicht etwa der Webserver die Schriftarten bei Google abruft, sondern stets der Browser des Nutzers und damit auf jeden Fall die IP Adresse an Google übermittelt. Vermutlich werden dabei noch weitere Informationen, etwa über den Browser, die Bildschirmauflösung und vieles mehr übermittelt. Ob der Einsatz einer Schriftart, auch wenn sie hübsch anzusehen ist, als „berechtigtes Interesse“ zur Weitergabe von Daten angesehen werden kann, ist zumindest fraglich.

Ganz abgesehen vom Datenschutz dauert die externe Abfrage der Schriftwarten natürlich auch einige Millisekunden, die die Ladezeit der eigenen Seite erhöhen.

Es gibt also mehrere Gründe, die Google Webfonts nicht mehr von den Google Servern abzurufen, sondern direkt auf dem eigenen Server einzubinden. Wir haben das Problem vor allem bei einigen WordPress-Projekten indentifiziert, weil viele Themes Google Webfonts verwendenden und unbemerkt abrufen.

Hier die Kurzübersicht, was zu tun ist:

1. Hat meine Seite Kontakt mit dem Google-Webfont-Server?

2. Die Schriftart auswählen und herunterladen

3. Die heruntergeladene Schriftart auf deinen Server hochladen

4. Die Schriftart mit einem Code Schnipsel über deine style.css Datei einbinden

5. Per Plugin die Abfragen zum Google Server blocken

1. Hat meine Seite Kontakt mit dem Google-Webfont-Server?

Wenn du Chrome/Chromium oder Firefox nutzt, kannst du ganz einfach einen Rechtsklick irgendwo auf deine Website machen und „Untersuchen“ anklicken. Im sich daraufhin öffnenden Fenster wechselst du auf den Reiter „Sources“.

Hier kannst du in der linken Sidebar sehen, zu welchen externen Servern eine Verbindung hergestellt wird.

Ist dort fonts.googleais.com und fonts.gstatic.com zu finden, ruft eure Seite Schriftarten bei Google ab.

2. Die Schriftart auswählen und herunterladen

Praktischerweise gibt es ein Tool, dass die Google Fonts in ein paar wenigen Klicks in Webfonts umwandelt und euch diese herunterladen lässt. Zusätzlich wird der dazu passende Code generiert. Diesen könnt ihr dann in eurer WordPress Projekt einbinden:

  • Geht auf: Google Webfonts Helper,
  • Gebt oben links in der Suche den Namen deiner genutzten Google Font ein,
  • Wähle die Schriftart aus der Liste aus.
  • Wähle bei „2. Select Styles“ aus, welche Stärken und Stile dieser Schriftart du benötigst (im Zweifsfall alle)
  • Klicke unter „4. Download files“ auf den Downloadbutton, um die Schriftwarten herunterzuladen.

3. Die heruntergeladene Schriftart auf deinen Server hochladen

  • Enptacke die heruntergeladene .zip Datei
  • Verbinde dich per FTP mit deinem Server
  • Erstelle einen neuen Ordner, z.B. fonts 
    (ich habe den Ordner direkt im Child-Theme angelegt, unter ../wordpress/wp-conten/themes/abcd-child-theme/fonts)
  • lade die entpackten Schriftarten in das neue Verzeichnis hoch

4. Die Schriftart mit einem Code Schnipsel über deine style.css Datei einbinden

Jetzt liegen die Schriftart schonmal auf dem Server und ihr müsst dem Browser des Nutzers noch Angaben darüber machen, wo er die Schriftart für die WordPress-Seite finden kann und dass er sie nutzen soll.

  • Passe den „Folder prefix“ im Webfonts Helper unter „3. Copy CSS“ an. Wenn der Ordner fonts wie beschrieben im Child-Theme liegt, muss der Prefix schlicht „fonts/“ lauten.
  • Kopiere den Code, den Webfonts Helper euch bei „3. Copy CSS“ anzeigt.
  • Füge ihn in deine style.css Datei ein. Die style.css Datei findet ihr unter …/wp-content/themes/abcd-child-theme/style.css“.

So kann der Code dort aussehen.

Info: Am besten sollte der Code in die style.css-Datei eures Child-Themes eingefügt werden. Dadurch kannst du weiterhin Updates deines Themes durchführen, ohne dass Code, den man selber eingefügt dabei verloren geht. Mein Tipp, wenn ihr noch keinen Chidl-Theme habt, ist der „Orbsius Child Theme Creator“. Fügt ihr den Code stattdessen direkt in die style.css eures Haupt-Themes ein, müsst ihr bei jedem Theme-Update den Code erneut einfügen.

5. Per Plugin die Abfragen zum Google Server blocken

Fast geschafft. Jetzt verwendet WordPress bereits die Schriftart auf dem eigenen Server. Allerdings nimmt das Theme weiterhin Kontakt mit den Google-Servern auf. Wenn ihr die Einbindung nicht gerade selber vorgenommen habt und noch wisst, wie ihr das gemacht habt, ist es schwierig die Einbidnung aus vorhandenen Theme zu entfernen. Es ist aber möglich, die Kontaktaufnahme zu unterbinden:

  • Installiert das Plugin „Remove Google Fonts References
  • Aktiviere das Plugin.
  • Es gibt keine Einstellungen, das Plugin funktioniert out of the box, d.h. ohne dass etwas zu konfigurieren ist.
  • Richtig ist, dass das Plugin lange Zeit nicht aktualisiert wurde. Es gibt aber auch keine bekannten Probleme oder Sicherheitslücken, sodass es kein Problem zu sein scheint.

Fertig?

Abschließend kann man einfach Schritt 1 wiederholen, um zu prüfen, ob die eigene Seite nun tatsächlich keinen Kontakt mit dem Google-Server mehr aufnimmt.

Viel Erfolg!


Keine Kommentare

Trackbacks/Pingbacks

  1. DSGVO: So sind Gemeinden & Non-Profits auf der sicheren Seite - Kirchen Kommunikation - […] Eine Anleitung, wie man Google Schrift­arten lokal speichern kann, sodass die Abfrage bei Google entfällt – was nach kirch­li­chem…

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

+ 40 = 48