Zum Inhalt springen

Google Fonts datenschutzkonform in WordPress einbinden

Bislang war es möglich, sich auf ein Ausnahmerecht zur berufen ” berechtigte Interesse gemäß Art. 6 Abs. 1 lit. f DSGVO oder die Einwilligung gemäß Art. 6 Abs. 1 lit. a DSGVO”, das Münchner Gericht setzt dem nun einen Riegel vor, auch mit der Begründung, dass es andere Möglichkeiten gibt, Google Fonts datenschutztechnisch regelkonform einzusetzen. Auch Google bietet dafür die Schriften und auch die CSS-Einbindung für eine bequeme Umsetzung an.

DSGVO-Gerichtsurteil: Google Fonts sind jetzt 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.

Google Fonts entfernen und wieder sauber einbinden

Bei jeder Nutzung von WordPress deaktiviere ich erstmal die voreingestellten Google Fonts (z.B. mit dem Plugin Autoptimize) und stelle dann meine gewählten Schriften selbst gehostet zur Verfügung.

Die Schriften im Google-Fonts-Katalog sind Open Source und werden unter Lizenzen veröffentlicht, die sowohl private als auch kommerzielle Nutzung erlaubt.

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 datenschutzkonform 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):

Klicken Sie auf den unteren Button, um den Inhalt von de.wordpress.org zu laden.

Inhalt laden

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: 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 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/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=de

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

 

 

Schlagwörter:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.