Google Fonts | DSGVO

Nach Hause telefonieren mit Hilfe "freier" Google Schriften

Per Zufall bin ich darauf gestoßen, daß die in die eigene Webseite eingebundenen Google Fonts nicht DSGVO konform sind, da sie über den Google Server laufen. Sobald also Besucher die Homepage ansteuern, werden Benutzer-Daten an Google weitergeleitet.

Umsonst ist bekanntlich nur der Fliegenschiss unter den Mülleimern ... - Denn die Google Fonts stehen zwar frei zur Verfügung, aber offensichtlich erkauft man es sich mit der Weiterleitung von Webseiten-Aufrufen an den Google Dienst (Google LLC in den USA). Die Einbindung der Schriften über den Google Server sind also nicht datenschutzkonform.

Auch meine Webseite verwendet, wen wundert's eigentlich noch, Google Fonts. Und nach dem jüngsten, "immateriellen" Schadensersatzurteil (deklariert als Schmerzensgeld) des LG München zur nicht datenschutzkonformen Nutzung von Google Fonts habe ich mich nach einer passenden Lösung bemüht. Was ich hingegen von der unausgegorenen DSGVO allgemein halte, behalte ich an dieser Stelle aber lieber für mich ...

Die Lösung: lokale Einbindung per Child Theme

Um die Google Fonts weiterhin verwenden zu können (wenn man es denn möchte), ohne sich dem Risiko einer Abmahnung auszusetzen, sollte man sie lokal einrichten. Das ist sozusagen der Trick. Die einzelnen Schritte dazu werde ich ausführlich darlegen am Beispiel des CMS Grav mit dem Theme "learn2", das ich für meine Webseite verwende. Sie sollen als Wegweiser zum Einrichten einer DSVGO-freundlichen Schriften-Einbindung dienen. Für einige Wordpress-Themes und andere Pagebuilder sollte diese Vorgehensweise ähnlich ablaufen.

Dazu muß das verwendete Theme entsprechend angepaßt werden. Damit bei der nächsten Theme-Aktualisierung die Einstellungen jedoch nicht überschrieben werden, sollte unbedingt ein sogenanntes geerbtes "Child Theme" angelegt werden, was immer die beste Methode zum Ändern oder Anpassen eines Themes ist. Bevor wir also die Google Schriften ermitteln und herunterladen, sollten wir erst einmal ein Child Theme anlegen.

Anlegen eines Child Themes "learn2_child"

Dazu werden am Beispiel des learn2 Themes des CMS Grav mit Hilfe eines FTP-Programmes folgende Schritte durchgeführt:

  1. Einen neuen Ordner erstellen in:
    /user/themes/learn2_child

  2. Anlegen einer neuen Design-YAML-Datei unter:
    /user/themes/learn2_child/learn2_child.yaml

mit folgendem Inhalt:

streams:
 schemes:
   theme:
     type: ReadOnlyStream
     prefixes:
       '':
         - user/themes/learn2_child
         - user/themes/learn2
  1. Erstellen einer YAML-Datei unter:
    /user/themes/learn2_child/blueprints.yaml

mit folgendem Inhalt:

name: learn2_child
version: 1.0.0
description: "Extending learn2"
icon: crosshairs
author:
   name: Team Grav
   email: devs@getgrav.org
   url: http://getgrav.org

Jetzt muß noch das Standardtheme (hier: "learn2") in der Konfigurationsdatei unter

/user/config/system.yaml

auf das neue Child Theme umgestellt werden. Unter pages und theme wird "learn2" durch "learn2_child" ersetzt:

pages:
 theme: learn2_child

Nun wird ein weiteres Verzeichnis für die lokalen Google Fonts angelegt:

/user/themes/learn2_child/fonts/

Sodann wird die Datei "theme.css" in das Child Theme kopiert, indem zuvor ein weiteres Verzeichnis "css-compiled" erstellt wird. Das kopierte "theme.css" wird später noch angepaßt.

Kopiere "theme.css" von
/user/themes/learn2/css-compiled/theme.css
nach
/user/themes/learn2_child/css-compiled/theme.css

Die Verzeichnisstruktur sollte am Ende dann so aussehen:

learn2_child

Im Child Verzeichnis befinden sich noch die zuvor erstellten Dateien "learn2_child.yaml" und "blueprints.yaml". Im Font Ordner sind bereits die noch herunterzuladenen Google Fonts angedeutet.

Das neue Theme "learn2_child" ist jetzt erstellt und das Theme "learn2" wird das Basistheme dazu sein. Durch künftige Aktualisierungen des Basis-Themes bleibt das Child Theme fortan unberührt.

Identifizieren der Google Schriften

Um festzustellen, ob die eigene Webseite Google Fonts benutzt und ob Google daraus die Nutzerdaten bezieht, rufen wir folgende Seite auf:

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

oder auch

https://google-fonts-checker.54gradsoftware.de/de

Dort geben wir unsere Webseiten Adresse ein und überprüfen die externe Nutzung von Google Fonts. Ist das Ergebnis positiv, werden die einzelnen Google Schriften angezeigt, die wir später ersetzen wollen und noch herunterladen müssen.

Google Fonts lokal einbinden und CSS anpassen

Sind die Google Schriften identifiziert, werden in einem weiteren Schritt über die Seite "Google Webfonts Helper" die benötigten Google Schriftarten in den unterschiedlichen Schriftstärken als gezippte Datei heruntergeladen:

https://google-webfonts-helper.herokuapp.com/fonts

Und die dazugehörigen angepaßten CSS Dateien werden ebenfalls heruntergeladen. Unter dem Punkt 3 wird noch der Dateipfad angegeben, in der die Schriften später auf dem eigenen Server per FTP hochgeladen werden. Voreingestellt ist "url('../fonts/...", das wir hier so übernehmen und das für das soeben erstellte Child Theme genau zugeschnitten ist. Die CSS Datei wird entsprechend generiert.

Nun müssen die heruntergeladenen gezippten Google Fonts entpackt und per FTP auf die eigene Webseite in den Font-Ordner des Child Verzeichnisses hochgeladen werden:

/user/themes/learn2_child/fonts/

Der generierte CSS Code wird am Beispiel des Google Font "Inconsolata" in das geerbte "theme.css" unter "/user/themes/learn2_child/css-compiled/theme.css" folgendermaßen eingebunden:

/* @import url(//fonts.googleapis.com/css? ... |Inconsolata); */

/* inconsolata-regular - latin */
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/inconsolata-v31-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/inconsolata-v31-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

Der CSS Code weitere Google Fonts wird einfach unter dem vorherigen CSS Code eingefügt. Um die Verbindung zum Google Server zu trennen, muß noch die ganz oben stehende Importzeile gelöscht bzw. mit Schrägstrich und Sternchen auskommentiert werden. Im letzten Schritt kann mit einem der Google-Fonts-Checker nochmals geprüft werden, ob wirklich alle Google Schriften lokal eingebunden sind.

Wer lediglich einfache html- und css-Dateien seiner Webseite anpassen möchte, dem hilft evtl. folgendes Video:
Abmahnung wg. Schriftarten