Google Fonts DSGVO-konform in WordPress einbinden

Aktualisiert am 23. September 2022

Bist du wegen angeblichen Verstoß gegen das Persönlichkeitsrecht abgemahnt worden? Dann springe gleich an das Ende des Artikels →

Wenn du eine Webseite öffnest, die Google Fonts verwendet, dann lädt Google diese Schriften nach und deine Website sendet ohne Einwilligung des Nutzers Daten in die USA. Und dies ohne technische Notwendigkeit, denn du kannst diese Schriften lokal installieren. In diesem Artikel erkläre ich dir,

  • wie du erkennen kannst, ob deine Website Google Fonts nutzt
  • wie du das Laden von Google Fonts unterbindest
  • wie du Google Fonts datenschutzkonform nutzen kannst
  • welche Plugins diese Fonts nachladen

DSGVO-Gerichtsurteil: Google Fonts sind illegal

(Az. 3 O 17493/20) Dynamische IP-Adressen stellen für den Betreiber einer Webseite ein personenbezogenes Datum dar, denn er verfügt abstrakt über die rechtlichen Mittel, die vernünftigerweise eingesetzt werden könnten, um mithilfe Dritter, und zwar der zuständigen Behörde und des Internetzugangsanbieters, die betreffende Person anhand der gespeicherten IP-Adressen bestimmen zu lassen (im Anschluss an BGH VI ZR 135/13).

Der Einsatz von Schriftartendiensten wie Google Fonts kann nicht auf Art. 6 Abs. 1 S.1 lit. f DSGVO gestützt werden, da der Einsatz der Schriftarten auch möglich ist, ohne dass eine Verbindung von Besuchern zu Google Servern hergestellt werden muss.

Hier geht es zum Urteil  des Landesgerichts München vom 20.01.2022

Wer dagegen verstößt, macht sich unterlassungs- und schadensersatzpflichtig.

Warum sind Google Fonts nicht datenschutzkonform?

Immer, wenn du eine Website aufrufst, die Google Fonts eingebunden hat, werden die benötigten Schriften vom Google Server geladen oder es wird ein Kontakt zu Google Servern hergestellt, wobei sich “erkundigt” wird, ob es eine Veränderung der Fonts gegeben hat. Hierbei werden unter anderem IP-Adressen ausgelesen und gespeichert.

Verwendet deine Homepage Google Fonts?

Du kannst über die sogenannte Entwickler-Console deines Browser überprüfen, ob und welche Google Fonts geladen werden.

Manuell prüfen über den Quelltext

  • Element untersuchen (im Screenshot der Browser Chrome), d.h. Mausklick rechts auf einen Bereich der jeweiligen Website im Kontextmenü “Untersuchen” klicken
    • Chrome:  Source, Unterbereich Pages
    • Firefox: Netzwerkanalyse, Unterbereich Schriften
    • Safari: Registerkarte Netzwerk, Unterbereich Schrift
  • Rechte Maustaste “Quelltext anzeigen”, mit STRG & F oder CMD & F suchen: “fonts” oder “google”

Du siehst dann die Verknüpfung zu Google über

  • fonts.googleapis.com
  • fonts.gstatic.com

Mit einem Online-Tool prüfen, ob deine Homepage Google Fonts nutzt

Bei diesen beiden Homepages verspricht der Anbieter, die Nutzung der Google Fonts feststellen zu können. Dazu gibst du deine Website-Adresse an und prüfst. Diese Homepage gibt den geladenen Font an und ermöglicht dir so eine Fehlersuche:

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

Ich gehe davon aus, dass die Abmahner ein ähnliches Tool benutzen und diese Nutzung eine gute Sache ist.

Welche Google Fonts benutzt dein Theme?

Um Google Fonts richtig zu adressieren, wenn du diese lokal eingebunden hast, ist es hilfreich zu wissen, welche Fonts auf deiner Homepage verwendet werden.

Optionen deines Themes prüfen

Wenn du als Admin eingeloggt bist, kannst du prüfen, wo auf deiner WordPress-Homepage Schriften eingebunden werden. Die Schriften können einen eigenen Menüpunkt im Customizer, oder unter Design (im Customizer) oder in den Einstellungen haben.

Du suchst nach Typographie, Schriftarten oder Fonts.

In meinem Theme gibt es unter Customizer den Punkt Typographie – Screenshot links: hier kannst du sehen, dass Google Fonts aktiviert und deaktiviert werden können.

Welche Plugins laden Google Fonts?

Manche Plugins bringen ihre eigenen Google Fonts mit, d.h. die Verknüpfung zur USA, das sind natürlich alle Plugins, mit denen du Google Fonts für dein Theme auswählst

Bei vielen Tools kannst du das Laden von Google Fonts unterbinden, beim Layerslider z.B. so: LayerSlider → Optionen → LayerSlider Settings → Google Fonts deaktivieren. Oft kann man innerhalb des Plugins auf die im Theme verwendete Schrift umstellen, dann werden die Schriften meist auch DSGVO-konform geladen.

Alle Dienste von Google wie Google Maps oder den Kalender etc., werden Google Fonts automatisch geladen (und Cookies gesetzt) – auf der Seite, wo du diesen Dienst verwendest. Diese Dienste werden über Plugins oder iFrames eingebunden und ich rate dir davon ab. iFrames binden du externe Elemente ein, d.h. dieser Frame ist ein Fenster zu einer anderen Website – Google Maps oder YouTube, aber auch Buchungsplattformen arbeiten so – wie z.B. Treatwell.

Plugins, die Google Fonts entfernen

Mit diesen Plugins kannst du Google Fonts entfernen

 

Google Fonts DSGVO-konform im Child-Theme einbinden

  1. Schrift aussuchen https://fonts.google.com ↑
  2. hast du eine bestimmte Vorstellung von einer Schrift, z.B. Helvetica, die es so bei Google nicht gibt, google: Webfont ähnlich Helvetica
  3. auf dieser Homepage werden dir dann die verschiedenen Schriftschnitte und das CSS zur Verfügung gestellt: https://google-webfonts-helper.herokuapp.com/fonts ↑
  4. Schrift runterladen
  5. Auspacken,
  6. Ordner fonts auf Root-Ebene deiner WordPress-Installation erstellen, und dort die Schrift reinpacken.
  7. Das CSS anpassen (Pfad), kopieren und
  8. in deinem Child-Theme oder unter wp-content (Customizer) einfügen

Ich bevorzuge die Variante Child Theme und eine absolute Pfadangabe im CSS – also: https://dozent.digitalfahrschule.de/fonts/abeezee-v12-latin-….

Google Font serverseitig einbinden

  • die Webadresse ist https://dozent.digitalfahrschule.de
  • auf der Root-Ebene liegen die Fonts
    ACHTUNG: die Fonts liegen direkt im Fonts-Ordner, also nicht in fonts/pt-sans/….
/* abeezee-regular - latin */
@font-face {
  font-family: 'ABeeZee';
  font-style: normal;
  font-weight: 400;
  src: url('https://dozent.digitalfahrschule.de/fonts/abeezee-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('ABeeZee Regular'), local('ABeeZee-Regular'),
       url('https://dozent.digitalfahrschule.de/fonts/abeezee-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://dozent.digitalfahrschule.de/fonts/abeezee-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://dozent.digitalfahrschule.de/fonts/abeezee-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('https://dozent.digitalfahrschule.de/fonts/abeezee-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://dozent.digitalfahrschule.de/fonts/abeezee-v12-latin-regular.svg#ABeeZee') format('svg'); /* Legacy iOS */
}

Google Fonts serverseitig einbinden

Die jeweilige Klasse im Theme ansprechen

Hier die Überschriften der Seiten/Beiträge:

.entry-title { font-family: 'ABeeZee';}

Google Fonts via Plugin DSGVO-konform einbinden

Wem der Weg zu umständlich ist, und wer noch Platz für ein Plugin hat, dem sei dieses empfohlen (Achtung, die einzelnen Klassen müssen trotzdem über CSS angesprochen werden):

Google Fonts in Themes einbinden, Beispiel Divi & Elementor

Wie fast jedes Theme, so laden auch Elementor und Divi automatisch Google Fonts.

Für Benutzer des Themes Elementor

  1. Hindere das Script der Google Fonts, diese zu beziehen
    1. z.B. durch das Plugin Autoptimize
    2. oder durch eine Anpassung der functions.php deines Child-Themes
      // Google Fonts Skript
      add_filter( ‘elementor/frontend/print_google_fonts’, ‘__return_false’ );
      Die Schriften werden im Editor weiterhin geladen und sichtbar sein, aber nicht im Frontend, also in der User-Ansicht.
  2. Schriften laden (Web-Fonts-Helper von Google ↑)
  3. Custom Fonts bei Elementor – hier gibts ein Extra-Tool!
    Dashboard > Elementor > Custom Fonts
    neu hinzufügen

Für Benutzer des Themes Divi

Im Front-End-Builder von Divi kannst du die neuen Schriften hinzufügen, wenn du im Editor bist. Füge ein neues Text-Element hinzu und gehe in den Reiter Design und dann in einen der Text-Bereiche. Klicke auf das Feld Text-Schriftart. Hier findest du den Button “Hochladen”.

Die genaue Anweisung findet Ihr hier Schritt für Schritt →, du erlaubst zusätzlich (kann, muss nicht) das Hinzufügen einer Schriftart über die wp-config.php

Google Icons DSGVO-konform nutzen

Was nicht jedem bewußt ist: Du hast über Google Fonts auch Zugriff auf fast 1000 Icons https://fonts.google.com/icons ↑. Diese kannst du, wie die Fonts auch, selber in einem Ordner deiner Wahl hosten. Am Besten in einem Ordner auf der Ebene deines Root-Verzeichnisses, z.B https://domain.de/icons/material-icons.woff – und dann wie gewohnt über CSS in dein Child-Theme einbinden.

Über Google Fonts Icons einbinden
Du siehst hier die Wahlmöglichkeiten auf einen Blick
  1. Icon aussuchen
  2. Icon downloaden
  3. In Ordner auf Root-Ebene deiner Homepage speichern
  4. Adressieren
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://domain.de/icons/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://domain.de/icons/MaterialIcons-Regular.woff2) format('woff2'),
url(https://domain.de/icons/MaterialIcons-Regular.woff) format('woff'),
url(https://domain.de/icons/MaterialIcons-Regular.ttf) format('truetype');
}

und deine jeweiligen Klassen ansprechen:

.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;

/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;

/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;

/* Support for IE. */
font-feature-settings: 'liga';
}

Icons via HTML ansprechen

<span class="material-icons">face</span>

In dem Artikel von Google kannst du noch mal nachlesen, was genau es mit den Material Icons auf sich hat und wie du sie einbindest, anpasst und ansprichst.

https://developers.google.com/fonts/docs/material_icons ↑

Exkurs: Font Awesome

Gleich der Technik von Google Fonts, holt auch Font Awesome ↑seine Informationen über einen Code aus den USA. Immer, wenn du die Website aufrufst wird Kontakt zu den  Servern von Font Awesome  hergestellt. Hierbei werden ebenso z.B. IP-Adressen ausgelesen und gespeichert.

Viele Themes verwenden Font Awesome – diese sind dann aber meistens serverseitig gespeichert und kein DSGVO-Thema (eher ein Performance-Thema).

Font Awesome
Icons von Font Awesome

Was sind Font-Awesomes? Font Awesome ist eine schriftartbasierte Icon-Sammlung. Die Icons können auch wie eine normale Schriftart z.B. eingefärbt und skaliert werden. Damit kannst du Elemente strukturieren und aufpeppen – Font Awesome können ebenso wie Google Fonts lokal installiert werden, wenn dein Theme über keine Font-Awesome-Icons verfügt.

Font Awesome lokal installieren

Wie bei den Google Fonts kannst du Font Awesome lokal auf deinem Server installieren und nutzen, ich zeige dir das ein meiner WordPress-Installation dieser Homepage.

  1. Font Awesome downloaden
  2. Zip entpacken
  3. Ordner über FTP in dein WordPress-Verzeichnis laden

Hier kannst du das kostenlose Paket laden: https://fontawesome.com/download ↑, die Datei speicherst du wo ab, wo du sie wieder findest und entpackst sie. Zwei Verzeichnisse schiebst du auf deine Homepage-Installation – ich kopiere sie in den Ordner “fonts” wo sich auch meine Google Fonts befinden. Den Namen des Ordners kannst du frei wählen, er wird Teil des Pfades zu den den Schriften.

Du brauchst zwei Ordner:
– webfonts
– CSS

Font Awesome in deinem Theme verfügbar machen

Dein Theme braucht die Information, wo diese Schriften liegen, um sie zu verwenden. Ich füge meiner header.php eine Code-Zeile hinzu, natürlich in mein Child-Theme, weil ansonsten bei einem Theme-Update diese Zeile überschrieben würde.

Ich füge in die header.php einen absoluten Pfad zu den Stylesheets der Fonts ein.

<link href="https://digitalfahrschule.de/fonts/css/all.css" rel="stylesheet">

Font Awesome nutzen

Über die Seite https://fontawesome.com/icons ↑ kannst du Icons suchen und verwenden: Klick auf das gewünschte Icon, dann kommst du auf die Icon-Seite auf der der Code für die Verwendung hinterlegt ist. In WordPress wechselst du zum visuellen Editor und fügst dann z.B. diesen Code ein:

<i class="fa-brands fa-affiliatetheme"></i>

 

Du kannst z.B. Größe und Farbe über CSS modifizieren, in meinem CSS-Beispiel habe ich die Farbe verändert. Die Größe kann man direkt im Code bestimmen:
<i class=”fa-brands fa-affiliatetheme fa-3x“></i>

.fa-brands {
color: #cc0000;
}

Font Awesome bei NextGEN deaktivieren

Du kannst einmal die Plugin-Dateien direkt bearbeiten – das hat den Nachteil, dass bei jedem Update deine Bearbeitung verloren geht. Besser ist es in der functions.php deines Child-Themes diesen Schnipsel einzufügen:

//* Remove NextGen Fontawesome CSS
add_action( 'wp_print_styles', 'theme_remove_nextgen_fontawesome_css', 100 );
function theme_remove_nextgen_fontawesome_css() {
wp_dequeue_style( 'fontawesome' );
wp_dequeue_style( 'fontawesome_v4_shim_style' );
}

// Remove NextGen Fontawesome JS
add_action( 'wp_print_scripts', 'theme_remove_nextgen_fontawesome_js', 100 );
function theme_remove_nextgen_fontawesome_js() {
wp_dequeue_script('fontawesome_v4_shim');
wp_deregister_script( 'fontawesome_v4_shim' );
}

Font Awesome im Theme Divi einbinden

Du kannst auch in verschiedenen leistungsstarken Themes die Font Awesome DSGVO-konform einbinden, siehe hierzu meinen Artikel Hinzufügen einer benutzerdefinierten Schriftart zum Divi-Theme →

Exkurs: Webschriftarten

Derzeit werden vier Formate von Schriftarten im Internet verwendet: EOT, TTF, WOFF und WOFF2. (…), die dir die Homepage von Google, der google-webfonts-helper (du verlässt diese Homepage)  → gesammelt anbietet.

EOT eignet sich nur für den IE, TTF bietet partielle IE-Unterstützung, WOFF verfügt über die breiteste Unterstützung, ist aber in einigen älteren Browsern nicht verfügbar und die WOFF 2.0-Unterstützung ist für viele Browser noch nicht implementiert. (…) Gut ist, WOFF 2.0 für Browser zu liefern, die diese unterstützen.  WOFF passt für die Mehrzahl der Browser.  TTF ist nützlich für alte Android-Browser (vor 4.4), ebenso die EOT für alte IE-Browser (vor IE9).

EOT und WOFF sind ausdrückliche Webformate, TTF und OTF sind Desktop-Formate, die ebenfalls im Browser funktionieren können.

Mehr dazu hier https://developers.google.com Optimize WebFonts ↑

Schriftformate für den Druck, bzw. Desktop installieren

Wenn du übrigens einen Schrifttyp von Google Fons für z.B. Photoshop oder Indesign benötigst (für dein Logo z.B. oder für Photoshop, Indesign, Word, Open Office etc.), kannst du direkt von Google Fonts den jeweiligen Schrifttyp laden und das Zip via Doppelklick auf Mac oder Windows installieren. Nach der Installation kannst du diese Schrift sofort verwenden.

Google Fonts Schriftfamilie für die Installation auf deinem Computer
Schriftfamilie aussuchen und auf deinem Computer speichern

 

Abgemahnt, was tun?

Als aller erstes bindest du die Fonts lokal ein → und prüfst entweder online oder manuell über den Quellcode ob du noch Bezüge zu Fonts findest →

Wenn ich die Kanzlei eRecht24 richtig verstanden habe, dann ist es gar nicht so einfach, als Abmahner Recht zu bekommen, die müssen glaubhaft nachweisen, dass eine “Verletzung allgemeiner Persönlichkeitsrechte” besteht.

“Kann die klagende Person den Sachverhalt nicht eindeutig glaubhaft darstellen, wird das Gericht die Klage mit hoher Wahrscheinlichkeit abweisen. Das Risiko, dass Privatpersonen mithilfe einer Abmahnung gegen Sie gerichtlich vorgehen werden, ist daher tendenziell gering.” Zitat eRecht24, hier ist der ganze Artikel ↑

Heise wird hier noch deutlicher

“Es spricht bereits einiges dafür, dass die Anwaltsschreiben rechtsmissbräuchlich sind, da die angeblichen Betroffenen die Websites vorsätzlich angesteuert haben dürften. Trotzdem sollten zumindest juristische Laien in diesen Fällen vorsichtshalber einen IT-Anwalt ins Boot holen. (..) Weniger riskant ist dagegen die Abwehr von Aufforderungsschreiben, die nicht von einem Anwalt kommen. (..) Es spricht daher einiges dafür, dass man derartige Schreiben ignorieren darf.” Heise nennt den Artikel Angeblicher DSGVO-Verstoß: Abmahnwelle wegen Google Fonts

Ich helfe dir, eine Abmahnung zu vermeiden

Weitere Informationen über meine Dienstleistung findest du auf meiner Firmen-Homepage avida webDesign Berlin ↑

Ruf mich an 030-7974501 oder schreibe mir eine Mail: kontakt@avida-design.de

oder hinterlasse einen Kommentar, vielleicht kann ich dir auch unbürokratisch helfen 😉

 

 

4 Gedanken zu „Google Fonts DSGVO-konform in WordPress einbinden“

Schreibe einen Kommentar