DSGVO und die Google Fonts

DSGVO Google fonts
Teile diesen Beitrag!

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

Teile diesen Beitrag!

Kommentar verfassen

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

 

Der Elementor Basics Mini-Kurs:

Was ist ärgerlicher, als beim Design der eigenen Webseite festzustellen, dass all deine tollen Ideen nicht mit deinem Wordpress Theme umsetzbar sind?

Aber halt! Dafür gibt es ja inzwischen die Wordpress Pagebuilder, mit denen das Webdesign auch für Nicht-Programmierer easypeasy geworden ist. Nur ein paar Elemente per drag-and-drop hin und her geschoben und schon hast du deine super Webseite.

OK, zugegeben, ganz so einfach ist es nun doch nicht…du brauchst vor allem einen Plan, eine Idee, sonst wirst du von den Möglichkeiten vermutlich erschlagen.

Aber!

Um überhaupt erstmal einen Eindruck von den Möglichkeiten zu bekommen, kannst du dich hier für meinen kostenlosen ELEMENTOR BASICS Mini-Kurs anmelden. Elementor ist der Pagebuilder meines Vertrauens … und vielleicht auch bald deiner.

Elementor macht das Design einer Webseite, die genau so aussieht, wie du das möchtest, super einfach! Keine Beschränkungen durch Themevorgaben mehr!

Mini Kurs Elementor Basics

In meinem ELEMENTOR BASICS Mini-Kurs zeige ich dir in vier Videolektionen an vier Tagen die Grundlagen von Elementor, damit du siehst, ob Elementor eine Option für dein Webdesign ist.

Elementor ist in der Grundversion übrigens kostenlos und funktioniert mit jedem Wordpress Theme!

Also melde dich gleich hier an!

 
 

 
 

Ja

Wenn du das Häkchen nicht setzt, bekommst du nur den ELEMENTOR BASICS Kurs, versprochen!

Newsletter

Du möchtest noch mehr Informationen über Webdesign, Wordpress und Elementor?

Dann abonnier gerne: 

Umekos Designletter

In meinem Designletter informiere ich dich (ungefähr) 1x im Monat über aktuelle Blogartikel, Freebies, Rabattaktionen zu meinen Kursen und dem Launch der neuen 2019er Version meines Webdesign-Kurses “Abenteuer Webseite 2.0”.

Deine Einwilligung in den Versand  meines Newsletters ist jederzeit widerrufbar über einen Link am Ende jedes Newsletter oder mit einer Mail an meine E-Mail Adresse (office@umekodesign.de).

Der Versand meines Newsletters erfolgt gemäß meiner Datenschutzerklärung.

Das neueste aus dem Blog:

Wordpress Pagebuilder

Bist du mit dem Theme deiner WordPress Webseite unzufrieden, möchtest aber nicht gleich wechseln? Möchtest du mehr Entscheidungsmöglichkeiten für dein Webseitendesign? Brauchst du eine andere Seitenaufteilung als von deinem Theme vorgegeben? Und möchtest du dieses alles, ohne vorher Programmieren zu lernen?

Weiterlesen
Ist Wordpress kompliziert

Immer häufiger stolpere ich im Internet über die Aussage, dass WordPress so kompliziert zu bedienen und unübersichtlich sei, dass man lieber auf Squarespace oder ähnliches ausweichen sollte. Als überzeugter WordPressnutzer wollte ich mal etwas Licht in dieses Dunkel bringen…

Weiterlesen
Newsletter

Umekos Designletter

Du möchtest noch mehr Informationen über Webdesign, Wordpress und Elementor?

Dann abonnier gerne meinen Designletter.

In meinem Designletter informiere ich dich (ungefähr) 1x im Monat über aktuelle Blogartikel, Freebies, Rabattaktionen zu meinen Kursen und dem Launch der neuen 2019er Version meines Webdesign-Kurses “Abenteuer Webseite 2.0”.

Deine Einwilligung in den Versand meines Newsletters ist jederzeit widerrufbar über einen Link am Ende jedes Newsletter oder mit einer Mail an meine E-Mail Adresse (office@umekodesign.de).

Der Versand meines Newsletters erfolgt gemäß meiner Datenschutzerklärung.

Meld dich gleich an: