DSGVO und die Google Fonts

Die DSGVO und die Google Fonts

Das Inkrafttreten der DSGVO zum 25.Mai 2018 stellt uns Webseitenbesitzer alle vor eine Menge Herausforderungen. (Du hast noch nichts von der DSGVO und den damit einhergehenden notwendigen Änderungen gehört? Dann wird es aber Zeit dich zu informieren!) Alle Links findest du ganz unten.
Und obwohl uns durch die damit einhergehenden Änderungen und Anpassungen der Webseiten eine Menge Arbeit gemacht wurde, ist der Ansatz natürlich richtig. Wer möchte schon, dass bei jedem Aufruf der Webseite Google benachrichtigt wird?

Leider heißt das aber auch, dass die schöne und sehr bequeme Möglichkeit auf die vielen, vielen Schriften von Google Fonts zuzugreifen, die heutzutage in allen neueren Themes angeboten wird, so nicht mehr datenschutzkonform ist und die Schriften wieder wie früher direkt in die Webseiten eingebunden werden müssen. (Die ersten Abmahnungen dazu sind tatsächlich schon erfolgt!)
Allerdings löst dies erst die erste Hälfte des Problems, da es nicht reicht, die Schriften lokal einzubinden, man muss natürlich auch verhindern, dass das Theme trotzdem versucht auf die Google-Server zuzugreifen…und da diese Funktion natürlich meistens tief in den Dateien vergraben ist, kann es da manchmal schon etwas tricky werden. Und wie ich bei den von mir betreuten Seiten festgestellt habe: es gibt nicht die EINE Lösung für alle, sondern jeder muss sehen, welche der Möglichkeiten bei ihm und seinem Theme funktioniert.

Die vier wichtigen Schritte sind:

1. Herausfinden ob deine Webseite bzw. dein Theme auf die Schriften von Google Fonts zugreift und welche das sind
2. Deine Google Fonts (oder andere Schriften) lokal einbinden
3. Zugriff des Themes auf die Google Fonts unterbinden
4. Abschließende Kontrolle

Nutze ich überhaupt Google Fonts?

First things first: finden wir heraus, ob du überhaupt Handlungsbedarf hast bzw. ob dein Theme Google Fonts nutzt. Die Funktion findest du entweder im Customizer unter „Typografie“ o.ä. oder in deinem Theme. Kennst du dich mit beidem nicht aus, kannst du es auch einfach im Browser herausfinden: Dazu nutzt du am einfachsten den Browser Chrome, denn damit ist das quasi mit einem Klick getan. Außerdem siehst du hier ob du Google Analytics einsetzt, Google Maps nutzt, etc. (das weißt du natürlich schon, aber so kann es auch jeder andere sehr leicht herausfinden -> ist deine Datenschutzerklärung aktuell???)
Wenn du weißt, dass dein Theme die Google Fonts verwendet, dann kannst du diesen Abschnitt getrost überspringen.
Du bist also in Chrome (ich habe überall gelesen, dass es diese Möglichkeit des Herausfindens auch in Firefox gibt, aber das konnte ich leider nicht verifizieren, da ich diese Möglichkeit nicht gefunden habe 😞 – die Entwicklerwerkzeuge dort beinhalten sie jedenfalls nicht #meinemeinung), surfst auf deine Webseite und klickst dann mit der rechten Maustaste, gehst ganz unten aus “Untersuchen” und dann auf “Sources”.

DSGVO und Google Fonts
Nach Hause telefonieren – nutzt du noch Google Fonts?

Hier siehst du nun links alle “Sources” bzw. alle Quellen, die deine Webseite anfunkt – wichtig ist uns hier das “fonts.googleapis.com“ und das „fonts.gstatic.com“. Findest du diese beiden Einträge, nutzt deine Webseite die Google Fonts, und wenn nicht, dann sind die Schriften entweder schon lokal eingebunden oder du benutzt die Systemschriften und kannst deshalb hier aufhören zu lesen…
Wenn du schon dabei bist, dann kannst du dir hier gleich ansehen, welche Schriften du benutzt und welche du dementsprechend jetzt lokal einbinden musst, damit die Webseite weiterhin so aussieht, wie sie aussehen soll.

Sonderfall Plugin “LayerSlider”

Meine eigenen Recherchen haben mir gezeigt, dass der LayerSlider vielfach schon Google Fonts eingebunden hat, auch wenn diese gar nicht genutzt werden –  das solltest du vielleicht vorher klären, wenn du den LayerSlider auf deiner Webseite nutzt, damit du dich hinterher nicht dumm und dusselig suchst (so wie es mir ging…). Du findest die Funktion in deinem Dashboard unter LayerSlider -> Optionen -> LayerSlider Settings -> Google Fonts

Schriften im LayerSlider
Diese Schriften sind im LayerSlider schon hochgeladen

Hier kannst du die Fonts einfach links mit Klick auf das rote Kreuz löschen und dann unten “Save Changes” anklicken. Jetzt solltest du nur noch die Fonts angezeigt bekommen, die du auch wirklich einsetzt.

 

Schriften herunterladen und per Plugin einbinden

Ich habe einige Möglichkeiten zum Schriften einbinden ausprobiert und finde die hier vorgestellte am einfachsten. Soll heißen: natürlich kann man das auch anders machen, ich empfehle dieses Plugin zur DSGVO Stressreduzierung…
Du lädst dir zuerst “deine” Schriften von Google Webfonts Helper herunter, klick dabei alle von dir verwendeten Stärken und Schriftschnitte an. In dem zip-Ordner, den du dir dann auf deinen Rechner herunterlädst, findest du jede Schrift in den Formaten .woff2, .woff, .eot, .svg und .ttf. Dies stellt sicher, dass jeder Browser eine für ihn kompatible Schriftdatei findet und deine Webseite überall gleich gut aussieht.

Plugin Custum Fonts
Schriften hochladen mit “Custom Fonts”

Beachte bitte, dass du eine Schrift, die du in verschiedenen Stärken und Schriftschnitten (normal und kursiv) nutzt, auch in all diesen Stärken und Schnitten einbinden musst!
Jetzt installierst du dir das Plugin “Custom fonts” von Brainstorm. Die Schriften hochladen kannst du jetzt unter Design -> Custom Fonts

Du lädst für jede Schriftvariante die 5 Schrift-Dateien hoch und klickst hinterher auf “Add new font”.

Beispiel: wenn du die Schrift “Open Sans” in dünn (300), normal (400), mitteldick (700) und dünn kursiv brauchst, musst du 20 Schriftdateien in 4 Schriften hochladen.
Diese Art Schriften einzubinden funktioniert natürlich auch mit anderen Schriften, die es nicht bei Google Fonts gibt. Du brauchst dazu nur die jeweiligen Dateien (siehe oben) der Schrift deiner Wahl, die du dir z.B. bei Font Squirrel generieren lassen kannst.

Zugriff auf das Google Fonts Archiv unterbinden

Jetzt wird es evtl. etwas tricky. Es sind zwar einige Plugins im Umlauf, die genau diese Funktion beihalten, das heißt aber leider nicht, dass das auch bei deinem Theme klappt. Ich musste bei dem von mir eingesetzten Theme BRIDGE tatsächlich in der functions.php herumändern, da alles andere nicht funktioniert hat.
Update: “Remove Google Fonts References” funktioniert bei BRIDGE!
Kurzer Exkurs Child Theme: solltest du tatsächlich in deinen Dateie ändern müssen, dann ändere nicht im Theme selbst, sondern leg dir ein Child Theme an, sonst musst du die Änderung nach jedem Themeupdate wiederholen.
Die Plugins, die du ausprobieren kannst, findest du unten aufgelistet.

Bestenfalls klappt eins davon, sonst musst du vermutlich den Themesupport nutzen um an die nötigen Infos zu kommen.
Überprüfen kannst du das Ganze natürlich wieder mit den Entwicklerwerkzeugen im Chrome Browser (siehe oben).

Überprüfen ob die Webseite so aussieht wie vorher.

Um zu sehen, ob du alle Schriften erwischt hast, siehst du dir die Webseite einfach im Browser an…nee, das wäre ja zu einfach, oder? Hier kommt es nämlich darauf an, welche Schriften du auf deinem PC/Laptop/iPad etc. installiert hast. Wenn du wie ich (Designer!) alle möglichen Schriften installiert hast (laaange nicht alle, die ich benutze..), dann ist die Chance natürlich groß, dass auch die Schrift von deiner Webseite dabei ist. In diesem Fall wird die Webseite zwar bei dir richtig angezeigt, aber vielleicht eben nicht bei deinen Besuchern.
Aus diesem Grund testet du das Aussehen deiner Webseite besser auf dem Smartphone – und besserst gegebenenfalls nach.

Das wars auch schon. 🙃

Links

DSGVO:
https://datenschmutz.net/dsgvo-checkliste-fuer-blogs/
(Dieser Artikel deckt eigentlich alle Fragen ab, ganz unten sind zusätzlich noch weiterführende Links)

Andere Artikel zum Schriften einbinden:
https://www.blogmojo.de/google-fonts-lokal-einbinden/
https://heddesheimer.de/blog/google-fonts-datenschutzkonform-einbinden-astra-dsgvo/
https://wp-ninjas.de/wordpress-google-fonts
https://www.mittwald.de/blog/mittwald/howtos/dem-datenschutz-zuliebe-wie-ihr-google-fonts-lokal-in-eure-webseiten-einbindet

Plugin Custom Fonts

Schriften herunterladen:
Google Webfonts Helper

Plugins, um die Google Fonts abzuschalten:
Autoptimize
Remove Google Fonts References
Disable Google Fonts

Kommentar verfassen

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

* Die DSGVO-Checkbox ist ein Pflichtfeld

*

Ich stimme zu