Zuletzt aktualisiert am 12. Nov 2023
Viele Websites nutzen die kostenfrei verfügbaren Google WebFonts für ihre Schriften. Dabei liegen diese Schriften zumeist bei Google auf dem Webserver und werden via Google Font API auf der Website eingebunden.
Bei jedem Aufruf der Website werden somit Nutzerdaten der Besucher*innen wie z. B. IP-Adresse (laut DSGVO personenbezogene Daten) an Google in die USA übermittelt, ohne vorher explizit nach deren Zustimmung zu fragen.
(Anmerkung: Dieser Beitrag ersetzt keine juristische Beratung und enthält Informationen, die ich nach bestem Wissen & Gewissen zusammengetragen habe.)
Google sagt zwar, dass es keine Cookies setzt oder die Nutzerdaten verwendet, nur … tja. Who knows.
Anfang 2022 hat das Landgericht München dann in einer Rechtssprechung entschieden, dass die Einbindung der Google Webfonts über die Google Font API nicht datenschutzkonform sei. Großer Knall.
Ob Eure Website Google WebFonts über Google einbindet oder ob sie lokal installiert sind, könnt ihr entweder mit den Entwicklerwerkzeugen Eures Browsers (z. B. Firefox oder Chrome) untersuchen oder hier ganz einfach checken: https://sicher3.de/google-fonts-checker/ und hier: https://www.e-recht24.de/google-fonts-scanner.
Wo ein Problem – Da auch eine Lösung
Ihr könnt Google Webfonts auch lokal auf dem eigenen Server installieren und somit die Verbindung zu Google unterbrechen, ohne auf die verwendete Schriftart verzichten zu müssen.
Wie ihr FontAwesome Icons lokal installieren könnt, dazu hab ich einen eigenen Blogartikel geschrieben:
FontAwesome lokal in DIVI einbinden und über CSS verwenden
Und so geht das lokale Einbinden der Google WebFonts, wenn ihr DIVI als Theme verwendet:
Vorbereitung
Ihr braucht:
- Einen FTP Zugang
- einen Text-Editor
- Zugang zum Backend Eurer Website
Schritt #1 – Liste der verwendeten Schriften
- Schau Dir verschiedene Seiten Deiner Website an
- Über die Entwicklerkonsole Deines Browsers siehst Du, welche Schriften Du verwendest. Notiere Dir jede Schriftart, -gewicht und ob sie kursiv verwendet werden
Schritt #2 – Schriften via FTP in Deinen Child-Themes Ordner hochladen
- Geh zu Google Webfonts Helper und lade Dir Deine verwendeten Schriften runter
- Entzippe die Schriften und leg via FTP in Deinem Child-Theme einen Unterordner „fonts“ an. Lade hier die Schriften hoch.
Schritt #3 – Stylesheets anpassen
- Gib im Google Webfonts Helper bei „Customize folder prefix (optional): ../Ordnername-Deines-Childthemes/fonts/ ein
- Kopiere das generierte CSS
- Öffne mit einem Text-Editor die style.css aus Deinem Child-Theme und kopiere hier das generierte CSS rein
- Ich persönlich benenne die font-family gerne um bzw. häng hinter dem Schriftnamen noch gerne ein „lokal“ hinten dran. z. B. „Raleway lokal„.
- Zusätzlich packe ich pro Code-Block auch noch folgendes CSS dazu. Damit wird eine Fallback-Schriftart angezeigt, bis Eure benutzerdefinierte Schrift geladen wurde (Performance):
font-display: swap;Insgesamt schaut die style.css dann ungefähr so aus:
/*
Theme Name: Divi Child
Theme URI: http://www.elegantthemes.com/gallery/divi/
Template: Divi
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Version: 4.11.2.1634629105
Updated: 2021-10-19 09:38:25
*/
/* raleway-100 - latin */
@font-face {
font-family: 'Raleway lokal';
font-style: normal;
font-weight: 100;
src: url('../Divi-child/fonts/raleway-v28-latin-100.eot'); /* IE9 Compat Modes */
src: local(''),
url('../Divi-child/fonts/raleway-v28-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../Divi-child/fonts/raleway-v28-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
url('../Divi-child/fonts/raleway-v28-latin-100.woff') format('woff'), /* Modern Browsers */
url('../Divi-child/fonts/raleway-v28-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
url('../Divi-child/fonts/raleway-v28-latin-100.svg#Raleway') format('svg'); /* Legacy iOS */
font-display: swap;
}- Tauscht nun via FTP die style.css in Eurem Child-Theme Ordner, durch die aktualisierte style.css aus.
Schritt #4 – Google Webfonts in Divi hochladen
- Dazu geht ihr auf die Seite, auf der ihr die Google Webfonts verwendet und öffnet das entsprechende Modul. Geht unter Design auf Schriftart und hier auf Hochladen.
- Im Account-Namen tragt ihr den Schriftnamen ein. In meinem Fall MIT dem „lokal“ also: Raleway lokal und wählt komplett alle dazugehörigen Schriften aus. Der Haken bei Unterstützte Schriftgewichte bleibt bei Alle drinnen.
Achtung: Sollte die Meldung „Du bist leider nicht berechtigt, diesen Dateityp hochzuladen“ kommen, dann müsst ihr noch eine kleine Schleife über die wp-config.php machen.
Tragt vor /* Das war’s, Schluss mit dem Bearbeiten! Viel Spaß. */ folgendes ein:
define('ALLOW_UNFILTERED_UPLOADS', true);Nachdem ihr die Schriften hochgeladen habt, unbedingt wieder rauslöschen.
Schritt #5 – Lokal installierte WebFonts als Standard einstellen
- Geht dazu unter Divi → Theme Customizer
→ Allgemeine Einstellungen → Typografie und wählt hier Eure lokal installierten Schriften aus.
→ Header & Navigation → Primäre Menüleiste und wählt hier Eure lokal installierten Schriften aus.
Schritt #6 – Anbindung zu Google kappen
- Zu guter Letzt geht ihr unter Divi in die Theme-Optionen und deaktiviert den Punkt „Google-Schriftarten verwenden“.
- Checkt nun alle Eure Seiten, ob alles ordentlich angezeigt wird und überprüft mit der Entwicklerkonsole, ob nun auch wirklich alle Schriften lokal eingebunden sind.
Schritt #7 – Alle Schriften verfügbar machen
- Erfahrungsgemäß werden manchmal nicht alle Schrifttypen ordnungsgemäß dargestellt.
Beim Hochladen der Schriften legt Divi unter /uploads/ einen neuen et-fonts Ordner an. Hier liegen dann auch schon die regulären Schrifttypen. Aber der Rest fehlt. Daher lade ich hier zusätzlich auch noch alle anderen Schrifttypen rein.
Google WebFons via Plugin lokal einbinden
Empfehlen möchte ich hier auch gerne das OMGF Plugin. Einmal installiert und aktiviert, sucht es automatisch die verwendeten Google WebFonts und holt sie sich lokal runter. Wirklich super easy!
In Divi nutze ich lieber die vorherige Vorgehensweise. Auch bei Premium Themes oder bei Verwendung von PageBuildern lohnt sich ein Blick in die Einstellungen. Viele der kostenpflichtigen Themes bieten die Möglichkeit an, Google WebFonts auch lokal zu installieren und zu verwenden.
Für das Enfold Theme Vers. 4.4. findet ihr HIER eine Anleitung (engl.), wie ihr Google Webfonts lokal einbinden könnt.
Zum Thema Abmahnung
Im Moment erreichen einige Website-Betreiber*innen Abmahnungen mit einer Schadenersatzforderung von 100 €.
- Schritt: Atmen
- Schritt: Kühlen Kopf bewahren
- Schritt: Folgenden Artikel „Virales Phänomen: Ersatzforderungen von Privatpersonen wegen der Nutzung von Google Webfonts – wie reagieren?“ von IT-Recht Kanzlei lesen
Darin ist unter 2. zu lesen:
Ergibt die Prüfung, dass tatsächlich Google Webfonts genutzt und Schriften deswegen durch Verbindungsaufnahme zum Google-Netzwerk geladen werden, sollten Seitenbetreiber unbedingt schnellstmöglich auf eine rein lokale Einbindung der Google Fonts umstellen und so Datenübermittlungen unterbinden.
Das erhaltene Schreiben kann nach Auffassung der IT-Recht Kanzlei aber dennoch ignoriert werden. Insbesondere sollte der Zahlungsaufforderung nicht Folge geleistet werden.
Seitenbetreiber sind in keiner Weise verpflichtet, auf eine bloße vermeintliche Aufforderung wegen eines behaupteten Datenschutzverstoßes eine Geldzahlung zu leisten.
it-recht-kanzlei.de, 28.06.2022
Die Anwaltskanzlei Wilde Beuger Solmecke bietet zudem auf ihrer Website ein Musterschreiben an, um auf eine Abmahnung zu reagieren: https://www.wbs-law.de/it-und-internet-recht/datenschutzrecht/google-webfont-musterschreiben-61157/
Zu guter Letzt
Wenn ihr nicht weiter wisst oder es lieber jemanden machen lassen wollt … dann fragt mich. Ich bin da, wenn ihr mich braucht.