Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D Animationsagentur
    • Content Marketing Agentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Full-Service Agentur
    • Internetagentur
    • Local SEO Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • Performance Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopify Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
  • Beste Agentur finden
    • 3D Animationsagentur
    • Content Marketing Agentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Full-Service Agentur
    • Internetagentur
    • Local SEO Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • Performance Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopify Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Projekt anfragen
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
Projekt anfragen

Dr. Web » Webdesign » Google Fonts sind nicht mehr datenschutzkonform. Was nun? So bindest du die Google Fonts DSGVO-konform ein.

Google Fonts sind nicht mehr datenschutzkonform. Was nun? So bindest du die Google Fonts DSGVO-konform ein.

  • Aktualisiert am 23. November 2023
  • Markus Seyfferth von Markus Seyfferth
  • Webdesign
  • 23 Kommentare

Top Agenturpartner

Werbehinweis-Icon.

VABELHAVT

Innsbruck

DOERRER Webdesign

Frankfurt am Main

Ruslan Julbarissow

Köln

klickbeben

Innsbruck

Timo Specht

München

huks.digital

Karlsbad

Alle Agenturpartner

Update 25.7.2022 zu Google Fonts DSGVO-konform einbinden // Zur Zeit werden massenhaft Abmahnungen an Website-Betreiber versendet, in welchen 100,- EUR Schadensersatz gefordert wird, wenn diese Google Fonts auf ihrer Website einsetzen. Die Abmahnung erfolgt häufig in Verbindung mit der Aufforderung zur Abgabe einer Unterlassungserklärung in Höhe von 3.000 EUR pro Datenschutzverstoß.

Zunächst heisst es, bitte einen kühlen Kopf bewahren! Die Abmahnungen erfolgen in der Regel automatisiert, per E-Mail und ohne anwaltliche Vertretung. Hier sind Geschäftemacher am Werk. 

Im Übrigen ist dieser Artikel keine anwaltliche Beratung! Vielmehr fokussieren wir uns auf die technischen Aspekte der datenschutzkonformen Einbindung von Google Fonts.

Die bereits genannte Abmahnung liest sich in etwa wie folgt:

Sehr geehrte Damen und Herren,
am 13.06.2022 / 17:00 Uhr besuchte ich Ihre Website (XXX) und musste erschreckend feststellen, dass diese ohne meine Zustimmung Schriftarten von Google Fonts beziehungsweise deren Server geladen hat.

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.

Wie ich mich erkundigt habe, wird dabei meine IP-Adresse, wodurch ich zumindest teilweise identifizierbar bin und auch mein Verlauf nachvollzogen werden kann, an Google und deren Server in den USA übermittelt.

Dieses dürfte nicht nur nach der DSGVO nicht zugelassen sein, vielmehr sehe ich mich auch in meiner informellen Selbstbestimmung verletzt, da ich nicht mehr weiß, was Google nun mit meinen Daten anfangen kann.

Ähnlich ging es auch einem anderen Nutzer, hier urteilte bereits das Landgericht München 1 – Aktenzeichen 3 O 17493/20.

Ich habe mir erlaubt, einen entsprechenden Nachweis über die Einbindung der externen Google Fonts Ihrer Website abzuspeichern.

Damit es nicht weiteren Nutzern so geht wie mir, fordere ich Sie hiermit auf, unverzüglich bis SPÄTESTENS 18.06.2022 sämtliche Google Fonts, die über die Server von Dritten geladen werden, dauerhaft zu entfernen und mir hierüber Rückmeldung zu geben.

Das Landgericht München hat entschieden, dass dem Nutzer ein Schadensersatz in Höhe von 100,00 Euro zusteht ist.
Das sehe ich auch hier für angemessen an. Bitte überweisen Sie diesen ebenfalls bis zum 18.06.2022 auf mein Konto

Sollte ich jedoch bis dahin keine Widergutmachung erhalten haben, muss ich mich bei meinem Rechtsanwalt über weitere Schritte erkundigen, damit ich weiß, wer wie wo was über Ihre Website mit meinen Daten gemacht hat.

Das Landgericht München hat ebenfalls entschieden, dass bei Zuwiderhandlung ein Ordnungsgeld von 250.000 Euro, ersatzweise Haft, fällig wird. Auch wenn ich mich nicht dabei wohl fühle, wo meine Daten nun sind und was Google damit anstellt, möchte ich aber auch nicht, dass Sie eine solche Strafe tragen müssen, weil Ihnen ein Fehler unterlaufen ist.

Ich finde, jeder hat eine zweite Chance verdient, einen Fehler widergutzumachen, und biete Ihnen dies hiermit an.
Vielleicht hilft es Ihnen, über Google finden Sie nützliche Anleitungen zum sicheren Einbinden von Google Fonts und auch diverse Anbieter, die Ihnen sicherlich dabei helfen können.

Nutzen Sie die Chance, ich habe bereits mit meiner Rechtschutzversicherung telefoniert, die mir im Zweifel volle Kostenzusage für eine Klage erteilt hat.

Mit freundlichen Grüßen

Mauß Datenschutz [3] schreibt hierzu:

Wer solche Massenschreiben versendet, kann u.E. einen Schaden auch deshalb nicht geltend machen, weil die im Rahmen der Nutzung von Google Fonts stattgefundene Datenübermittlung in die USA gerade nicht ohne das Wissen und gegen den Willen der (den Fehler geradezu suchenden) Person, sondern gerade mit ihrem Wissen und mit ihrem Willen geschah.

[…] Sofern jemand nach Fehlern sucht und das Übermitteln seiner Daten an Google nicht nur in Kauf nimmt, sondern – um an die erhoffte Schadensersatzzahlung zu kommen – regelrecht beabsichtigt, verliert nicht die Kontrolle über seine Daten. Damit ist sein allgemeines Persönlichkeitsrecht auch nicht verletzt. Folglich kann auch ein Schadensersatzanspruch nicht begründet werden.

Damit es erst gar nicht soweit kommt, habe ich Dir folgende Anleitung erstellt, wie du Google Fonts datenschutzkonform einbinden kannst [Update Ende]:

Warum Du Google Fonts datenschutzkonform auf Deiner WordPress Website einsetzen solltest: Laut der jüngsten Rechtssprechung des Landgerichts München ist die Einbindung von Google Fonts über die Google Font API nicht datenschutzkonform. [1] Das Laden von Google Fonts über die Fonts API bedarf einer vorherigen, expliziten Zustimmung der Besucher. In diesem Artikel will ich Dir aufzeigen, wie Du Google Fonts selber datenschutzkonform einbinden kannst.

Wieso ist die herkömmliche Einbindung von Google Fonts nicht datenschutzkonform?

Grund ist, dass bei der Einbindung über die Google-Server die IP-Adresse der Besucher in die USA gesendet wird. Die USA zählen zu den Ländern, die den europäischen Anforderungen an den Datenschutz nicht genügen. Somit ist die Einbettung von externen Diensten wie Google Fonts oder auch Google Analytics nicht datenschutzkonform.

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.

— aus der Urteilsbegründung des LG München

Ein weiterer Grund, der auch die Einbettung von anderen Google-Diensten wie z.B. Google Analytics betrifft: Nach dem Urteil des EuGH vom 16. Juli 2020, Rs C-11/18 („Schrems II“), können sich Webseitenbetreiber nicht mehr auf eine sogenannte „Angemessenheitsentscheidung“ („Privacy Shield“ und vorher „Safe Harbor“) berufen.

Betroffen sind mehr als 880.000 Websites in Deutschland:

Google Fonts DSGVO Nutzung Statistik
Quelle: Builtwith

Laut Builtwith sind unter anderem Webseiten wie spiegel.de, heise.de, zeit.de betroffen sowie viele andere tausende Websites, welche Google Fonts auf die herkömmliche Art und Weise eingebunden haben:

Google Fonts DSGVO Nutzung Statistik
Quelle: Builtwith

Google Fonts DSGVO-konform einbinden: so geht es

Google Fonts lokal auf dem Server hosten

Wer Google Fonts über den Google Server bzw. die Fonts API eingebunden hat, muss in Kauf nehmen, dass die Nutzerdaten seiner Besucher an Google weitergegeben werden. Das ist jedoch nur zulässig, wenn hierfür eine Einwilligung des Besuchers vorliegt.

Als Alternative hierzu kannst Du die Google Fonts lokal einbinden. Das heisst, dass die Google Fonts direkt vom eigenen Server und nicht mehr über die Fonts API geladen werden. Auf diesem Wege werden also keine Nutzerdaten an Anbieter außerhalb der EU gesendet, solange sich der Server-Standort Deiner Website auch in der EU befindet.

Hier nun die einzelnen Schritte:

Schritt 1: Google Fonts runterladen

Dazu gehst Du auf die Seite der gewünschten Schriftart. In unserem Fall ist das die Schriftart „Source Sans Pro“. Oben rechts kannst Du mit „Download Family“ die Schriftart mit all ihren einzelnen Schnitten herunterladen.

Google Fonts herunterladen.

Problem hierbei: Bei Google Fonts kannst Du die Schriftschnitte nur im TTF-Format herunterladen. Google ist nunmal eine Datenkrake und möchte, dass Du deren Font API benutzt.

Das Format, das wir für den Einsatz auf der Website brauchen, ist jedoch Woff2. Woff2 (für „Web Open Font Format“) ist das Dateiformat für Webfonts, das am wenigsten Speicherplatz und damit auch Ladezeit für Deine Website beansprucht. Es wird von allen gängigen Browsern unterstützt:

Woff2 - Format caniuse. 95% aller Browser untersützen das Format.
95% aller Browser untersützen das Woff2-Format. [2]

Schritt 2: TTF in Woff2 umwandeln

Um die TTF-Dateien in das Woff2-Format umzuwandeln, kannst Du den Service Cloudconvert verwenden, ein Service der von der Lunaweb GmbH in München angeboten wird. Die Daten kannst Du per Drag & Drop herüberziehen. Bis zu fünf Dateien gleichzeitig sind kostenlos.

Woff2-Dateien aus Google Fonts erstellen.
Google Fonts kann man nur als TTF-Dateien herunterladen — dank Cloudconvert aber einfach in Woff2-Dateien umwandeln.

Nach der Umwandlung kannst Du die Dateien dann einfach herunterladen.

Screenshot der Website Google Webfonts Helper.

[Update Juni 2022] Als Alternative zu Cloudconvert kannst du auch den Dienst Google Webfonts Helper (Link) einsetzen. Über dieses Tool kannst du direkt unter den Google Fonts auswählen und bekommst diese im WOFF und WOFF2-Format heruntergeladen. Das passende CSS erhältst du obendrein auch noch mit, sodass du das CSS nur noch in deine Custom CSS oder in die Webfonts API einbinden musst, wie im Folgenden beschrieben:

Schritt 3: Woff2-Dateien auf den eigenen Server hochladen

Mit einem FTP-Programm wie Filezilla kannst Du dann diese Woff2-Dateien hochladen in einen Ordner Deiner Wahl. Wenn Du WordPress im Einsatz hast, sollte sich der Ordner normalerweise im Unterorder „/wp-content/“ befinden. In unserem Beispiel liegt der Ordner in /wp-content/uploads/assets/fonts/ .

Schritt 4: Die lokalen Schriftart per CSS einbinden

Sind die Font-Dateien im richtigen Ordner abgelegt, kannst Du sie über das Custom CSS in WordPress einbinden. Das Custom CSS findest Du in WordPress unter Design > Customizer > Zusätzliches CSS.

Für die Einbindung verwendest Du dann folgende Syntax. Je nach Schriftart und Dateinamen muss Du hier die Dateinamen und den Namen der Schriftart anpassen. Bitte achte auch darauf, dass die Groß- und Kleinschreibung bei den Dateinamen jeweils genau übereinstimmen:

@font-face {  font-family: "SourceSansPro Regular";  font-display: swap;  src: url(/wp-content/uploads/assets/fonts/SourceSansPro-regular.woff2) format("woff2");}

Schritt 5: Die lokalen Google Fonts im CSS referenzieren

Sobald Du die Google Fonts über den @font-face Codeschnipsel eingebunden hast, kannst Du sie auch entsprechend im CSS referenzieren, etwa so:

body {  font-family: "SourceSansPro Regular", system-ui, -apple-system, sans-serif;}

Auch hier musst Du darauf achten, dass die Referenzierung des Namens der Schriftart bzw. deren Schnitte genau übereinstimmen. Ferner ist es üblich, den Namen der Schriftart immer in geraden Anführungszeichen anzugeben. Die Anführungszeichen braucht es, sobald der Name ein Leerzeichen enthält, wie das etwa bei “SourceSansPro Regular” der Fall ist.

Alternative: Google Fonts DSGVO-konform nach Zustimmung laden

Für den Fall, dass Du die Fonts lieber weiterhin direkt über einen Google Server laden möchtest, musst Du dafür die Einwilligung Deiner Besucher einholen. Das kannst Du z.B. über die Cookie-Lösung „Real Cookie Banner“ tun, die Dir eine Hilfestellung für diesen Prozess anbietet.

Für andere Plugins wie z.B. Borlabs Cookie stellen die Entwickler hier eine Dokumentation bereit. Je nach Cookie-Lösung wirst Du dann in der Dokumentation des jeweiligen Anbieters eine entsprechende Anleitung finden.

Laden Google Fonts nicht schneller als selbstgehostete Fonts?

Nein. Seit Chrome 86 (Oktober 2020) auf die HTTP-Cache-Partitionierung umgestellt hat, müssen Google Fonts für jede Website neu heruntergeladen werden, unabhängig davon, ob die Schriftarten im Browser des Nutzers zwischengespeichert sind. Auch bei Safari und Firefox (ab Version 85, Januar 2021) wird dies so gehandhabt.

Die Folge: Google Fonts selber zu hosten verbessert als die Ladezeit deiner Website, da ein DNS-Lookup eingespart wird im Vergleich zur Bereitstellung über die Google Fonts API.

Benötigst Du Hilfe bei der datenschutzkonformen Einbindung von Google Fonts? Schreibe mir eine E-Mail an hallo@drweb.de mit dem Betreff “Anfrage Google Fonts DSGVO-konform einbinden”

Nachweise

[1] Urteil LG München

[2] Caniuse.com

[3] Mauß Datenschutz

Beitragsbild: Depositphotos

Wie hilfreich war diese Info?

Gesamtbewertung: 0 / 5. Anzahl Bewertungen: 2 0

Markus Seyfferth

Markus Seyfferth

ist seit 2019 Geschäftsführer bei Dr. Web. Zuvor war er sechs Jahre lang Vorstand des Smashing Magazine, im Rahmen dessen er u.a. das Online-Marketing, die Betreuung der Werbekunden sowie diverse Online-Projekte geleitet hat.

Lust auf mehr?

Die Bedeutung von Whitespace im Design

Whitespace (Weißraum oder „negativer Raum”) ist der leere Raum zwischen den Elementen einer Seite. Obwohl viele dies als Verschwendung von wertvollem Platz auf dem Bildschirm ansehen, ist der Weißraum ein wesentliches Designelement:

42 CSS Buttons mit Hover-Effekt & Code Snippets

Für schön anzusehende CSS-Buttons benötigt es schon lange keine Grafiken mehr — sie lassen sich formen aus der Schönheit des geschriebenen Codes. Doch die Erstellung kann ganz schön knifflig werden, wenn du an eine umfassende Browser-Kompatibilität denkst. Wie gut, dass es fertige Code-Schnipsel und zahlreiche Beispiele dafür gibt. Und noch besser, dass wir heute die besten Beispiele auch gleich in diesem Beitrag präsentieren.

KI Mobile-first Design in 2023: Hype oder Flop für Designagenturen?