Google Fonts DSGVO-konform lokal einbinden

So binden Sie Google Fonts DSGVO-konform auf Ihrer Website ein

Fachlich geprüft von: Rechtsanwalt Sören Siebert Rechtsanwalt Sören Siebert
(117 Bewertungen, 4.16 von 5)

Das Wichtigste in Kürze

  • Google Fonts sind von Google zur Verfügung gestellte Schriftarten, die Webseiten verwenden können, um Text einheitlich anzuzeigen.
  • Eine fehlerhafte Einbindung von Google Fonts führt zu einem Verstoß gegen das Recht auf informationelle Selbstbestimmung und kann zu Abmahnungen wegen des Einsatzes führen. Das Risiko einer Abmahnung ist jedoch im letzten Jahr gesunken.
  • Ob Sie Google Fonts rechtssicher auf Ihrer Webseite eingebunden haben, können Sie mit unserem eRecht24 Google Fonts Scanner checken.

Worum geht's?

Sie sind Webseitenbetreiber oder arbeiten an einem Webdesign-Projekt für Ihren Kunden und wollen Google Fonts integrieren, um die Vielfalt an unterschiedlichen Schriftarten zu nutzen? Zwar mag die Einfachheit der Integrierung von Google Fonts Ihr Leben erleichtern. Dennoch sind damit gerade beim Datenschutz Risiken verbunden, sodass es sich lohnt, Google Fonts so in Ihre Website einzubinden, dass Sie erst gar nicht in die Gefahr kommen wegen Verstoßes gegen die Datenschutz Grundverordnung (DSGVO) abgemahnt zu werden. Zwar sind die Abmahnwellen wegen der Nutzung von Google Web Fonts mittlerweile abgeebbt. Doch auf der rechtlich ganz sicheren Seite sind Sie damit noch nicht. Hier erhalten Sie das nötige Wissen darüber, wie Sie Google Fonts datenschutzkonform einbinden.

 

Nutzt Ihre Website Google Fonts?

Prüfen Sie jetzt anonym und kostenfrei, ob Ihre Website Google Fonts DSGVO-konform einsetzt.

1. Google Fonts - kostenlose Schriftarten für die Website

Bei Google Fonts handelt es sich um ein von Google selbst bereitgestelltes und interaktives Verzeichnis an unterschiedlichen Schriftarten (engl.: fonts). Damit bietet Google die Option, verschiedene Schriftarten auf eigenen Webseiten zu nutzen, ohne diese zuvor auf den eigenen Server hochladen zu müssen.

Alles läuft problemlos über die Server von Google. Die Schriftarten werden einfach nachgeladen, sodass Sie sich Platz auf den eigenen Servern sparen.

Der große Vorteil dieser Möglichkeit ist zudem ihre kostenfreie Nutzung. Dies führt dazu, dass Webseitenbetreiber oder Webdesigner diesen Dienst vermehrt in unzähligen Webseiten einbinden. Dabei gibt es jeweils zwei Möglichkeiten:

  1. Sie laden die gewünschte Schriftart herunter und laden diese eigenständig in Ihrem eigenen Webspace wieder hoch. Die Schriftart wird bei Abruf dann von Ihrem eigenen Speicherplatz geladen und ist somit lokal eingebunden. Eine Verbindung zum Google-Server wird in diesem Fall nicht aufgebaut (Lokale Nutzung).
  1. Die ausgesuchte Schriftart wird bei jedem Aufruf der Webseite von den Google-Servern geladen. Es wird eine Verbindung zu den Google-Servern aufgebaut, sodass die Schriftart dargestellt werden kann. Dabei wird während des Verbindungsaufbaus zu den Google-Servern die IP-Adresse des Webseitenbesuchers an Google übertragen. Die Schriftart wird also nicht lokal eingebunden (Remote Nutzung).

2. Google Fonts Datenschutz: Gehen Datenschutz und Google Fonts konform?

Durch die Nutzung von Google Web Fonts schonen Sie zwar eigene Serverressourcen. Allerdings stellt sich dabei die Frage, was mit den Nutzerdaten Ihrer Kunden sowie Webseitenbesucher passiert und ob diese Daten ausreichend geschützt sind. Betrachtet man den Standort der Google-Server, so liegen diese in den Vereinigten Staaten von Amerika (USA). 

Damit Google die Schriftarten zur Verfügung stellen kann, laden Webseiten mit jedem Seitenbesuch automatisch die Web Fonts über einen Server von Google aus den USA. Google liest dann im Gegenzug zahlreiche Daten von Webseitenbesuchern aus. Dazu zählen u. a.

  • der Browser,
  • die Webseite, die der Nutzer besucht,
  • das Betriebssystem des Nutzers,
  • die Bildschirmauflösung des Nutzers
  • die IP-Adresse des Nutzers sowie
  • die Spracheinstellungen des Browsers.

Die IP-Adresse ermöglicht es Google, den Standort des Webseitenbesuchers zu bestimmen. Dabei handelt es sich um personenbezogene Daten (BGH, Urteil vom 16. Mai 2017 – VI ZR 135/13). Webseitenbetreiber dürfen diese nicht ohne Zustimmung von Usern erheben und an Google weiterleiten. Im Zusammenspiel mit den anderen erhobenen Daten ermöglichen es Webseitenbetreiber Google zudem, einen Fingerabdruck des Users zu kreieren, der diesen auf allen weiteren Webseiten wiedererkennt, sofern diese ebenfalls Dienste von Google integriert haben oder eigenbundene Dienste diese Informationen wiederum an Google weiterreichen. Datenschützer gehen davon aus, dass Google alle abgerufenen User-Daten speichert und für Tracking verwendet.

Mehr zum Thema Datenschutzerklärung und Google Fonts lesen Sie in unserem Artikel.

3. Gefahren der fehlerhaften Einbindung von Google Fonts

Gerade bei der dynamischen Einbindung von Google Web Fonts wird eine Verbindung zu Servern von Google in den USA hergestellt. Dadurch wird automatisch die IP-Adresse des Website-Besuchers an Google übermittelt und gespeichert. 

Das Landgericht München I (LG München I, Az. 3 O 17493/20) hat Anfang 2022 entschieden, dass die dynamische Einbindung von Google Fonts einen Verstoß gegen das Recht auf informationelle Selbstbestimmung darstellt. In diesem Fall wurden dem Kläger 100 € und Zinsen als Schadensersatz zugesprochen.

4. Abmahnwelle wegen fehlerhafter Einbindung von Google Fonts mittlerweile abgeebbt 

Das gerade genannte Urteil des LG München I war der Ausgangspunkt für eine Welle an Rundmails im Jahr 2022, in denen angeblich betroffene Webseitenbesucher Schadensersatzansprüche gegenüber Webseitenbetreibern und Unternehmern geltend machten. Ihnen wurde vorgeworfen, durch die dynamische Einbindung von Google Fonts IP-Adressen von betroffenen Personen an Google zu übermitteln und diese nicht ausreichend vor dem Zugriff durch Dritte zu schützen. Die Abmahnschreiben stammten dabei insbesondere von zwei Kanzleien. Gegen die Kläger, die von ihnen vertreten wurden, sind in den Jahren 2022/2023 mehrere Urteile ergangen, die allesamt klarstellen: Das Vorgehen der Kläger war rechtsmissbräuchlich. Die Rundmails waren versendet worden, um unter dem Vorwand einer Datenschutzverletzung schnelles Geld zu verdienen. Seit Frühling letzten Jahres gehören derartige Wellen von Abmahnungen wegen der Google Fonts Nutzung damit der Vergangenheit an.

Checkliste 
Wenn Sie dennoch ein solches Schreiben erhalten haben sollten, dann gehen Sie wie folgt vor:
  • Prüfen Sie zunächst, ob Sie Google Fonts remote oder lokal eingebunden haben.
  • Ob Google Fonts remote (und damit rechtswidrig) eingebunden ist, erkennen Sie an dem Quellcode der Webseite. Darin enthalten sind Verlinkungen auf googleapis.com oder fonts.gstatic.com.
  • Ist der Dienst remote eingebunden, suchen Sie nach Alternativen und binden Sie Google Fonts, mithilfe unserer folgenden Anleitung, lokal in Ihren Webseiten ein.
  • Haben Sie Google Fonts bereits lokal eingebunden, dann ist der Vorwurf innerhalb der Rundmail unbegründet. Antworten Sie in diesem Fall entweder gar nicht auf die Rundmail oder verweisen Sie in einer Antwort darauf, dass eine Remote-Einbindung nicht stattfindet und keine Verbindung zu Google aufgebaut wird.

 

Sollten Sie, trotz der Möglichkeit der lokalen Variante, weiterhin die Remote-Einbindung von Google Fonts betreiben und damit die IP-Adressen von Usern weiter an Google übermitteln, sind Sie rechtlich nicht auf der sicheren Seite. Auch wenn die Gefahr gesunken ist, sollten Sie sich bewusst sein, dass Sie weiterhin abgemahnt werden können und im schlimmsten Fall ein Ordnungsgeld droht. Die Themen rum um Google Fonts Datenschutz sind weiterhin existent.

5. Google’s Stellungnahme zur Google Fonts-Problematik und IP-Adressen

Am 18. November 2022 veröffentlichte Google ein Statement hinsichtlich der Bedenken zum Datenschutzrecht bei der Nutzung von Google Fonts. In seiner Stellungnahme betont das Unternehmen, dass die durch deren entwickelten Google Fonts-Web-API erfassten, gespeicherten und verwendeten Daten sich lediglich darauf beschränken, welche für eine reibungslose Bereitstellung der Schriftarten und die Erstellung von Nutzerstatistiken notwendig sind. Laut Google bewahrt es die gesammelten Daten sicher auf und nutzt diese weder für die Erstellung von Endnutzerprofile noch für Werbung. Hinsichtlich der Übertragung von IP-Adressen Ihrer User und der darin enthaltenen personenbezogenen Daten sagt Google lediglich, dass diese der normalen Funktionalität des Internets entspreche. Vermutlich impliziert Google damit, dass eine Verarbeitung der personenbezogenen Daten von ihrer Seite nicht erfolgt.

Trotz dieser Stellungnahme und der von Google gemachten Aussagen ändert sich für Sie – hinsichtlich der Nutzung von Google Fonts – allerdings nichts. Fest steht auch weiterhin, dass Sie die IP-Adressen Ihrer Webseitenbesucher an Google-Server übertragen. Damit erfassen, speichern und verarbeiten Sie personenbezogene Daten Ihrer Webseitenbesucher, was dazu führt, dass Sie damit nach dem Urteil des LG München aus dem Jahr 2022 gegen die Datenschutz Grundverordnung (DSGVO) verstoßen. Entscheidend für das LG München: Websitebetreiber können Google Fonts auch nutzen, ohne dass beim Aufruf der Webseite eine Verbindung zu einem Google-Server hergestellt wird und die Websitebetreiber die IP-Adresse der Webseitennutzer an Google übertragen. Deshalb ist der rechtlich sicherste Weg weiterhin: Achten Sie darauf, dass Sie stets die Einwilligung Ihrer Webseitenbesucher einholen und Google Fonts so einbinden, dass es nicht gegen das Datenschutzrecht (DSGVO)verstößt.

Das aktuelle Statement von Google zur Google Fonts-Problematik können Sie auf der Blogseite des Google Fonts Team unter https://fonts.googleblog.com/2022/11/your-privacy-and-google-fonts.html nachlesen.

6. So binden Sie Google Fonts richtig ein

Wenn Sie Google Fonts Schriften lokal einbinden möchten, sollten Sie zunächst prüfen, ob auf Ihrer Website bzw. innerhalb Ihres Templates Google Fonts geladen werden.

Ist dies der Fall, müssen Sie die Google Fonts zunächst deaktivieren und wie nachfolgend beschrieben, löschen bzw. durch die lokal eingebundenen Google Fonts ersetzen.

ACHTUNG

Google Fonts müssen nicht immer zwingend durch Ihr Website-Template geladen werden, sondern können in Ausnahmefällen auch von Drittanbieter-Diensten wie z. B. Google Maps stammen.

Um herauszufinden, ob Ihr Template Google Fonts lädt, sollten Sie Drittanbieter-Dienste vorerst deaktivieren.

Website auf Google Fonts prüfen

Sollten Sie sicher sein, dass Sie aktuell keine Google Fonts nutzen und somit keine Verbindung zu den Servern von Google bestehen, Sie aber dennoch Google Fonts Schriften lokal einbinden wollen, können Sie diesen Schritt auch überspringen.

 

Schritt 1: Website / Template auf Google Fonts prüfen

Um Ihre Website bzw. Ihr Template auf Google Fonts prüfen zu können, rufen Sie sich am besten im ersten Schritt die Entwicklerkonsole in Ihrem Browser auf (Mac: Cmd + Option + J / Windows:  Strg +Umschalt +J) auf.

Chrome:

Klicken Sie hier auf den Reiter “Sources”. In der linken Spalte sehen Sie nun die Daten, welche zu Ihrer Website / Ihrem Template geladen werden.

Google_Web_Fonts_Bild1.png

Wie auf dem Screenshot sehr gut zu sehen, werden hier derzeit Google Fonts direkt über die Server von Google geladen (fonts.googleapis.com & fonts.gstatic.com).

Auch sehen Sie hier direkt, welche Schriftarten (Open Sans) in welcher Form genutzt werden.

Firefox:

Klicken Sie hier auf den Reiter “Netzwerkanalyse” und geben Sie im Eingabefeld “fonts” ein.

Im Anschluss werden Ihnen die Fonts angezeigt, welche aktuell geladen werden. Auch hier sind die Google Fonts wieder sehr schön zu erkennen (fonts.gstatic.com).

GWF_Bild2.png

In der rechten Spalte unter dem Punkt “Kopfzeilen” sehen Sie außerdem, welche Schriftart verwendet wird.

 

Schritt 2: Google Fonts in der style.css ausfindig machen

Öffnen Sie ein FTP-Programm Ihrer Wahl und suchen Sie im Anschluss auf Ihrem Server sowie innerhalb des Template-Ordners nach der style.css - Datei bzw. der CSS-Datei, in welchem Sie die Styles Ihres Projektes festgelegt haben.

GWF_Bild3.png

Die Datei kann entweder direkt im Hauptverzeichnis Ihres Template-Ordners liegen oder es gibt hier einen entsprechenden Unterordner z. B. “fonts”.

Suchen Sie innerhalb der CSS-Datei im Anschluss nach folgendem Code:

 @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

In unserem Beispiel betrifft dies die Schriftartart “Open Sans”. Bei Ihnen könnte also ggf. eine andere Schriftart hinterlegt sein.

Diese Codezeile muss im nächsten Schritt “Google Fonts lokal einbinden” entfernt werden bzw. sie wird hier durch den lokalen CSS-Code für die Google Fonts ersetzt.

Tipp für WordPress-Nutzer

Als WordPress-Nutzer können Sie auch einfach ein Plugin wie z. B. Borlabs Font Blocker oder Disable and Remove Google Fonts installieren. Mit diesen Plugins werden alle Google Fonts Ihres Templates automatisch geblockt.

 

Google Fonts lokal einbinden: 4 Möglichkeiten inkl. Schritt-für-Schritt-Anleitung

Nachdem Sie sich nun für Ihre Google Fonts entschieden haben (oder lediglich Ihre bereits vorhandene Fonts lokal nutzen wollen), können Sie diese nun wie folgt lokal einbinden.

1. WordPress-Plugin

Als WordPress-Nutzer stehen Ihnen für die Einbindung von Google Fonts zahlreiche nützliche Plugins zur Verfügung. Das mit Abstand zuverlässigste sowie funktionsreichste Plugin ist OMGF.

OMGF.png

Nachfolgend möchten wir Ihnen zeigen, wie schnell und einfach Sie das OMGF Plugin auf Ihrer WordPress-Installation einrichten können.

 

Schritt 1: Das OMGF Plugin installieren & aktivieren

Installieren Sie im ersten Schritt das OMGF Plugin direkt über das WordPress-Backend. Klicken Sie hierzu auf Plugins - Installieren und geben Sie im Anschluss “OMGF” in das Suchfeld ein.

Plugin_OMGF.png

Klicken Sie hier jetzt auf den Button “Jetzt installieren” sowie “Aktivieren”.

 

Schritt 2: Konfiguration überprüfen

Nach der Aktivierung des OMGF Plugins arbeitet dieses vollkommen automatisch. Das bedeutet, das Plugin erkennt in der Regel sofort, wenn Google Fonts auf Ihrer Website geladen werden.

Klicken Sie zur Überprüfung in WordPress auf Einstellungen - Optimize Google Fonts.

(In unserem Beispiel haben wir das Astra-Theme installiert und dort eine Google Font Schriftart ausgewählt.)

OMGF_Aufgabenmanager.png

Wie Sie im Aufgabenmanager des Plugins sehr schön sehen können, wurde die Google Font sofort erkannt und vollautomatisch lokal eingebunden.

 

Schritt 3: Nicht benötigte Fonts löschen (optional)

Im unteren Bereich der Seite, genau genommen unter “Optimize Local Fonts” zeigt Ihnen das OMGF Plugin zudem nicht nur alle geladenen Fonts an, sondern bietet Ihnen hier auch die Möglichkeit, nicht benötigte Google Fonts zu löschen.

Optimize_Local_Fonts_1.png

Werden Ihnen hier also Google Fonts angezeigt, die Sie sowieso nicht nutzen (“wollen”), setzen Sie einfach einen Haken in der Zeile “Dont Load” und klicken Sie im Anschluss auf den Button “Speichern & Optimieren”.

Dont_Load.png

HINWEIS

Zusätzlich können Sie innerhalb dieser Einstellungen die Funktion “Load Early” aktivieren, um Google Fonts vorzuladen. Wählen Sie hier natürlich die Schriftart aus, welche Sie lokal eingebunden haben und nutzen.

Das Vorladen von Google Fonts macht immer dann Sinn, wenn Sie eine schlechte Ladezeit Ihrer Seite vermeiden möchten und somit wiederum den sogenannten FOIT- und FOUT-Effekt.

FOIT (Flash of Invisible Text):

Es wird so lange kein Text auf der Webseite angezeigt, bis sie geladen wird. Der Besucher sieht also einen “weißen Bereich”.

FOUT (Flash of Unstyled Text ):

Es wird lediglich einen Systemschrift angezeigt, welche während des Ladens durch die eigentliche Google Fonts ersetzt wird.

Das sogenannte “Preloading” sorgt also dafür, dass die Google Fonts

beim Laden priorisiert und somit als einer der ersten Ressourcen geladen werden.

OMGF Pro - Mehr Optionen zum Blockieren von Google Fonts

Mit der kostenlosen Version des OMGF Plugin lassen sich Google Fonts bereits zuverlässig blockieren und lokal einbinden. Allerdings werden in der Free-Version fast ausschließlich Google Fonts in Themes (Templates) erkannt.

OMGF Pro hingegen bietet Ihnen als WordPress-Nutzer noch viele weitere Erkennungsschemas an.

 

OMGF (free)

OMGF Pro

wp_enqueue_style() (wp_styles-Objekt)

JA

JA

HTML-Dokument ( <head>und <body>)

NEIN

JA

Remove resource hints  ( dns-prefetch, preload, preconnect)

NEIN

JA

@import statements

NEIN

JA

@font-face statements

NEIN

JA

Early Access Google Fonts

NEIN

JA

Material Icons

NEIN

JA

Nutzen Sie also die Pro-Version, sollten Sie in der Registerkarte “Erkennungseinstellungen” unter dem Punkt “Erweiterte Verarbeitung” jeweils noch alle vier Haken setzen und auf den Button “Änderungen speichern” klicken.

Erkennungseinstellungen.png

Sämtliche Google Fonts Quellen werden ab sofort blockiert und lokal eingebunden (außer Fonts, welche ausschließlich über die Google Server geladen werden z. B. Google Maps, ReCaptcha, YouTube etc.).

Ein weiteres sehr nützliches Features des OMGF Plugin ist, dass es bereits mit einer Vielzahl von bekannten Themes und Page-Buildern kompatibel ist.

 
Divi & Elementor

Bei Verwendung von Divi oder Elementor müssen Sie zunächst einmal sicherstellen, dass Sie alle Funktionen der lokalen Einbindung - direkt in Divi oder Elementor, deaktiviert haben.

Im Anschluss aktivieren Sie im OMGF Plugin zusätzlich folgende Option:

Weitere Informationen zu Divi finden Sie hier: https://daan.dev/docs/omgf-pro-faq/divi-compatibility/

 
Enfold & Avada

Zur Einrichtung von Enfold sowie Avada finden Sie alle wichtigen Informationen auf den folgenden Seiten.

Enfold

Hier sind zusätzliche Schritte notwendig: https://daan.dev/docs/omgf-pro/remove-async-google-fonts/

Avada

Hier muss lediglich sichergestellt werden, dass Avada keine lokale Speichermethode verwendet): https://daan.dev/docs/omgf-pro-faq/avada-compatibility/

2. WordPress-Theme

Eine weitere Möglichkeit, Google Fonts lokal einzubinden, bieten zahlreiche WordPress-Themes, welche solch ein Feature bereits in ihren Einstellungen integriert haben.

Der große Vorteil, Sie müssen hier nichts weiter tun, als die Funktion für die lokale Einbindung zu aktivieren.

ACHTUNG

Dies funktioniert nur für die Fonts, welche direkt über das Theme geladen werden.

Sollte Ihr Theme über solch ein Feature verfügen, finden Sie dieses in der Regel über den Customizer.

Customizer.png

In unserem Beispiel nutzen wir das Astra Theme, wo Sie diese Funktion unter dem Punkt “Leistung” finden.

Leistungen.png

Wenn Sie hier nun “Google-Schriften lokal speichern” aktivieren, werden die Google Fonts, welch über das Theme eingebunden werden, lokal gespeichert und geladen.

Google-Schriften_lokal_speichern.png

Außerdem haben Sie in unserem Beispiel sogar noch die Möglichkeit, lokale Schriftarten vorzuladen.

3. Homepage-Baukasten

Wenn Sie Nutzer eines Homepage-Baukasten-Systems sind, sollten Sie sich genau bei Ihrem Anbieter über die Verwendung sowie Einbindung von Google Fonts informieren.

Das Gute vorweg: Die allermeisten Anbieter für Homepage-Baukasten speichern die Fonts bereits auf Ihren eigenen Servern, sodass Sie als Nutzer nichts weiter tun müssen.

Anbieter

Lokale Einbindung der Google Fonts*

Quelle

WIX

JA

https://support.wix.com/de/article/faqs-google-wix-und-die-dsgvo

Jimdo

JA

auf Nachfrage

1 & 1

JA

auf Nachfrage

WebGo

JA

auf Nachfrage

Strato

(JA), Webfonts werden über einen Proxy-Server eingebunden

 auf Nachfrage

*ausgenommen sind hier allerdings auch wieder Google Fonts, welche ausschließlich über die Google Server geladen werden (z. B. Google Maps, ReCaptcha, YouTube etc.)

4. Manuell (FTP & CSS): Schritt-für-Schritt-Anleitung

Wenn Sie mehrere Google Fonts auf ihrer Website nutzen, müssen Sie die folgenden Schritte für jede einzelne Schriftart durchlaufen.

 

Google Fonts lokal einbinden: Schritt-für-Schritt-Anleitung

Nachdem Sie sich nun für Ihre Google Fonts entschieden haben (oder lediglich Ihre bereits vorhandene Fonts lokal nutzen wollen), können Sie diese nun wie folgt lokal einbinden.

ACHTUNG

Wenn Sie mehrere Google Fonts auf ihrer Website nutzen, müssen Sie die folgenden Schritte für jede einzelne Schriftart durchlaufen.

 

Schritt 1: Google Fonts im Google Webfonts Helper

Rufen Sie den Google Webfonts Helper auf:  https://gwfh.mranftl.com/fonts und suchen Sie hier nach Ihren Google Fonts bzw. der Schriftart, welche Sie auf Ihrer Website ersetzen oder auch neu einbinden möchten.

GWF_Bild4.png

Wählen Sie im Anschluss den entsprechenden Zeichensatz sowie die Schriftschnitte aus.

In unserem Beispiel wird als Schriftart Open Sans genutzt. Aus diesem Grund wählen wir diese auch im Webfonts Helper aus.

Zudem wählen wir hier in Punkt 1 “latin” (Standard) sowie unter Punkt 2 die jeweiligen Styles (300, 400 (=regular), sowie 700).

Welche Styles Ihre Google Fonts haben, können Sie wie oben beschrieben, über die Entwicklerkonsole Ihres Browsers nachvollziehen. Diese können Sie dann innerhalb des Google Webfonts Helper entsprechend auswählen.  

 

Schritt 2: CSS-Code kopieren

Sobald Sie in Punkt 1+2 eine Auswahl treffen oder die Schriftgröße anpassen, wird in Echtzeit in Punkt 3 “Copy CSS” ein CSS-Code für Ihre Google Fonts generiert.

Dieser Code enthält alle notwendigen Details zur Schriftart und sorgt dafür, dass Sie diese – wie von Ihnen ausgewählt, auf Ihrer Website nutzen können.

GWF_Bild5.png

Unter dem Punkt “Customize folder prefix (optional)” sollten Sie am besten direkt auch den entsprechenden Pfad hinterlegen, über welchen die Fonts auf Ihrem Server abgelegt werden.

Legen Sie hierzu am besten innerhalb Ihres Template-Ordnern einen Ordner “fonts” an - sollte dieser bisher nicht existieren, und fügen Sie hier die entsprechenden Dateien Ihrer Fonts ein.

Den zu verwendeten Pfad sollten Sie an einer Stelle innerhalb Ihres FTP-Programms angezeigt bekommen.

Dies könnte beispielsweise wie folgt aussehen:

GWF_Bild6.png

 

Schritt 3: Dateien downloaden

Unter Punkt 4 “Download files” müssen Sie jetzt die Fonts downloaden.

GWF_Bild7.png

Google Fonts lokal einbinden: Schritt-für-Schritt-Anleitung

Nachdem Sie sich die passenden Google Fonts für Ihre Website heruntergeladen haben, müssen Sie folgende Schritte für eine lokale Einbindung befolgen:

 

Schritt 1: Child-Theme erstellen (für WordPress-Nutzer)

Als WordPress-Nutzer sollten Sie zunächst unbedingt ein Child-Theme erstellen, wenn Sie bisher noch keines angelegt haben.

Denn damit gehen Sie sicher, dass die Google Fonts bzw. die entsprechende CSS-Datei bei einem Update Ihres eingesetzten Templates nicht überschrieben wird.

Am einfachsten geht das mit einem Plugin wie https://wordpress.org/plugins/generate-child-theme/.

 

Schritt 2: ZIP-Datei entpacken

Nachdem Sie Ihre Google Fonts heruntergeladen haben, müssen Sie diese nun entpacken.

GWF_Bild8.png

 

Schritt 3: Google Fonts auf den Server hochladen (lokal)

In diesem Schritt müssen Sie die entpackten Google Fonts auf den Server hochladen. Am einfachsten geht das direkt über Ihren FTP-Zugang, mit welchem Sie Zugriff auf alle Daten Ihres Servers haben.

Alternativ haben Sie je nach Hoster auch die Möglichkeit über den Webbrowser auf Ihre Serverdateien zugreifen zu können. Der Dateiexplorer könnte dann z. B. wie folgt aussehen:

GWF_Bild9.png

Suchen Sie hier Ihren Template-Ordner (bzw. Ihr Child-Theme-Ordner) und legen Sie hier einen Unterordner für Ihre zuvor heruntergeladenen Google Fonts an.

GWF_Bild10.png

Diesen Ordner können Sie beispielhaft “fonts” nennen. Sollte bereits ein solcher Ordner existieren, fügen Sie Ihre Google Fonts hinzu.

GWF_Bild11.png

WICHTIG

Sollten Sie einen anderen Ordner bzw. ein anderes Verzeichnis für Ihre Google Fonts nutzen, müssen Sie entsprechend den Pfad innerhalb des CSS-Codes anpassen (wie bereits in Schritt 2 beschrieben).

GWF_Bild12.png

ÜBRIGENS

Als fortgeschrittener Nutzer können Sie natürlich auch für jede Schriftart einen eigenen Unterordner anlegen. Hierfür müssen Sie jedoch im Anschluss innerhalb der entsprechenden CSS-Datei noch Anpassungen vornehmen.

 

Schritt 4: style.css anpassen

In diesem Schritt müssen Sie nun die style.css - Datei für Ihr Template bzw. Ihr Projekt anpassen. In der Regel finden Sie diese direkt in Ihrem entsprechenden Template-Ordner auf dem Server.

GWF_Bild13.png

Hier müssen Sie jetzt den bereits zuvor kopierten CSS-Code (Schritt 2 „Copy CSS“) für die die Google Fonts einfügen.

CSS-Code kopieren:

GWF_Bild14.png

CSS-Code einfügen:

GWF_Bild15.png

 

Schritt 5: Lokale Einbindung überprüfen

Überprüfen Sie im letzten Schritt mit Hilfe der Entwicklerkonsole - wie bereits zu Anfang erwähnt, die lokale Einbindung Ihrer Google Fonts.

7. Google Fonts lokal einbinden: Hilfreiche Tools für WordPress-Nutzer!

In der nachfolgenden Übersicht möchten wir Ihnen einige sehr hilfreiche Plugins vorstellen, mit denen Sie als WordPress-Nutzer Google Fonts auf einfache Weise blockieren, sowie je nach Plugin, Google Fonts sogar direkt lokal einbinden können.

WICHTIG

Jedes Plugin arbeitet dabei technisch etwas anders. Grob lässt sich sagen, dass die unten aufgeführten Google Fonts Plugins für alle bekannten Page-Builder wie z. B. Avada, Elementor, Oxygen etc. sogenannte “Hooks” (Filter) nutzen, um Google Fonts direkt im Theme blockieren zu können.

Ist diese Möglichkeit nicht gegeben, versuchen die Plugins in aller Regel den Google Fonts Host zu blockieren, über welche die Google Fonts geladen werden.

Aber auch das ist nicht immer möglich (je nach Theme), sodass Sie sich nicht zu 100 % auf das installierte Plugin verlassen können.

Sie sollten also nach der Installation eines der nachfolgenden Plugins immer selbst noch einmal nachprüfen (am besten über die Browser-Konsole - wie in diesem Artikel beschrieben), ob Google Fonts tatsächlich vollständig geblockt werden.

Dasselbe gilt natürlich ebenso für jene Plugins, welche Google Fonts lokal einbinden. Dies geschieht meist sehr zuverlässig, da die entsprechenden Fonts zuvor gedownloadet und im Anschluss über eine lokale URL geladen werden.

Aber auch hier gilt es, die Einbindung der lokalen Google Fonts zu überprüfen.

PRAXIS-TIPP

Löschen Sie nach dem Einrichten eines Plugins unbedingt den Cache (sollten Sie ein Caching-Plugin nutzen), damit Sie alle aktuellen Einstellungen sehen können.

Kostenlose Plugins:

Premium Plugins

8. Google Drittanbieter-Dienste und die Fonts-Problematik

Wie wir bereits in unserem Artikel eindringlich hingewiesen haben, werden Google Fonts nicht ausschließlich über sogenannten Website-Templates auf der Website eingebunden.

Auch Drittanbieter-Dienste (Plugins etc.) und natürlich -wie sollte es auch anders sein, die Google-Dienste wie z. B. Google Maps, Google reCaptcha und auch YouTube selbst, nutzen Google Fonts für die Ausgabe auf Ihrer Website.

Wo genau liegt die Fonts-Problematik?

Dienste wie Google Maps, Google reCAPTCHA oder YouTube werden technisch vom Websitebetreiber über Iframes oder Javascript-Code in eine Website eingebunden. Diese Iframes bzw. der Javascript-Code laden dann eigenständig im Browser des Websitebesuchers alle Daten vom Diensteanbieter herunter, die für die korrekte Anzeige und Funktion des Dienstes notwendig sind.

Zu diesen Daten gehören in den v.g. Beispielen auch Google Fonts. Da Iframes oder Javascript-Code hier hinsichtlich der Information, ob Google Fonts nachgeladen werden, jedoch eine Black Box sind, kann kein wirksames Blockieren dieses speziellen Nachlade-Prozesses erfolgen.

Zudem besteht hier auch keinerlei Möglichkeit, die Fonts dieser Google-Dienste auf irgendeine Weise lokal einzubinden, denn der Verbindungsaufbau zum Google Font Server erfolgt hier dennoch, da dies im Quellcode des Dienstes so festgelegt ist.

Google-Dienste, welche außerdem normal und ohne Proxy eingebunden werden, übermitteln die IP-Adresse bereits mit dem ersten “Request” an Google.

Aus diesem Grund stellt sich die Frage, wie viel Sinn ein Verzicht auf diese Dienste macht. Sie kommen schließlich auf so gut wie jeder Website zum Einsatz.

Wie gehen Website-Betreiber also aktuell mit dieser Google Fonts-Problematik um?

Die derzeit sicherste Lösung wäre ein kompletter Verzicht auf die Google-Dienste, wie z. B. Maps, reCaptcha oder auch YouTube.

Wie wir jedoch wissen, möchte der Großteil der Website-Betreiber nicht auf diese Dienste verzichte -verständlich! Voneiner sinnvollen Lösung können wir hier also nicht sprechen.

PRAXIS-TIPP

Ein möglicher Weg wäre also die Google-Dienste bis zur Einwilligung zu sperren/blocken, was Sie in der Regel bereits tun, wenn Sie Ihre Website DSGVO-konform betreiben.

Solange also die Google-Dienste auf Ihrer Website gesperrt sind, z. B. via Content Blocker, werden auch keine Google Fonts geladen und infolgedessen keine Daten an Google übertragen.

Wie sicher ist dieses Vorgehen?

Es gibt de facto aktuell leider “noch” kein Urteil, welches genau diese Problematik behandelt. Auch gibt es vonseiten der Datenschutzbehörden unterschiedliche Auslegungen zu dieser Thematik.

Der Website-Betreiber trägt also auch hier zunächst einmal das volle Risiko!

eRecht24 Premium Banner

 

 

Sebastian Lenz
Sebastian Lenz

Sebastian Lenz ist Student und unterstützt nebenbei das eRecht24-Team in der Content-Erstellung von juristischen Beiträgen und Ratgebern. Durch seinen juristischen Background kann er komplizierte Sachverhalte und Themen in eine verständliche Form für die Praxis übertragen, sodass der Leser einen bestmöglichen Mehrwert daraus erhält. Seine Schwerpunkte und Interessen liegen besonders im IT-Recht sowie Strafrecht.

Rechtsanwalt Sören Siebert
Sören Siebert
Rechtsanwalt und Gründer von eRecht24

Rechtsanwalt Sören Siebert ist Gründer von eRecht24 und Inhaber der Kanzlei Siebert Lexow. Mit 20 Jahren Erfahrung im Internetrecht, Datenschutz und ECommerce sowie mit mehr als 10.000 veröffentlichten Beiträgen und Artikeln weist Rechtsanwalt Sören Siebert nicht nur hervorragende Fach-Expertise vor, sondern hat auch das richtige Gespür für seine Leser, Mandanten, Kunden und Partner, wenn es um rechtssichere Lösungen im Online-Marketing und B2B / B2C Dienstleistungen sowie Online-Shops geht. Neben den zahlreichen Beiträgen auf eRecht24.de hat Sören Siebert u.a. auch diverse Ebooks und Ratgeber zum Thema Internetrecht publiziert und weiß ganz genau, worauf es Unternehmern, Agenturen und Webdesignern im täglichen Business mit Kunden ankommt: Komplexe rechtliche Vorgaben leicht verständlich und mit praktischer Handlungsanleitung für rechtssichere Webseiten umsetzen.

Robin Schwethelm
Guten Tag zusammen,
gibt es schon Erfahrungen, wie die Google Fonts Einbindung über Clickfunnels unterbinden werden kann? Alle bisherigen Versuche haben nicht geholfen, wäre deswegen für einen Hinweis offen. Danke schonmal im Voraus!
LG Robin

6
So ein Schwachsinn seitens Abmahner
Als würden sie nicht google-suche nutzen oder andere Dienste von Google. Dann sollen sie google auch abmahnen.
Das IP Adressen durch Internetdienste n zu sehen sind und verarbeitet werden ist eben standard. Es gibt kein Dienst, dass die die IP Adresse nicht logt. Wenn sie im Internet Dienste nutzen möchten, aber dennoch ihre IP nicht preisgeben möchten, sollen sie gefälligst einen VPN-Client für 8.00 Eur im Monat nutzen und nicht ihre vorgetäuschte Persönlichkeits -Recht-Verletzung nutzen um ehrlich arbeitende Menschen zu prellen.
Gruß, Birol

83
Kai B
kennt jemand hier ein tool, dass mir nicht nur die startseite nach google fonts durchsucht sondern alle seiten meiner webseite/domain? kann ja sein dass ich ein plugin welches google fonts lädt nur auf einer unterseite nutze... danke! kai
5
Maximilian
Hi, erstmal danke für das Scan-Tool. Allerdings sehe ich betreffend Wordpress in den Kommentaren nur Lösungsansätze für selbst-gehostete Wordpress-Seiten. Bei kostenlosen Baukasten-Wordpress-Seiten, bei denen man sich nur ein Theme aussucht und dann loslegen kann, gibt es keine Möglichkeit, CSS einzufügen. Auch Plugins können nicht installiert werden, das geht nur in der Bezahl-Variante von Wordpress.

Was heißt das in dem Fall? Man ist aus dem Schneider und Wordpress muss sich darum kümmern? Oder sollte man die Website dann komplett offline nehmen, in der Hoffnung, dass Wordpress sich darum kümmert?

Danke

12
Pascal von website-bereinigung.de
Ein Umstieg auf Wordpress.org, Theme Wechsel oder Tarif Upgrade wären die Optionen.

Ich würde ersteres empfehlen. Das ist unterm Strich die günstigste und langfristig die beste Lösung.

2
Golda
Und woher weiß ich, welche Theme da "sauber" sind und KEINE Google-Fonts benutzen? Ist nicht Wordpress als Anbieter für das (kostenlose) Produkt verantwortlich???
8
verbraucherschutz
Wie steht ihr dazu, dass Google auf den Developerseiten auf Anfrage eine Speicherung von IP-Daten kategorisch ausschließt für den Dienst GoogleFonts?


LG Udo Schmallenberg

8
Thomas
Aufgrund der niedrigen Bewertung wurde der Kommentar ausgeblendet Anzeigen Euer Tool zum prüfen, ob google fonts benutzt werden ist totaler müll.
Ich nutzte auf meiner Website, die mit Joomla erstellt wurde, nur die Arial Schriftart und keinerlei Google Fonts, und trotzdem schreibt das Tool, dass ich Google Fonts verwende. So ein Schwachsinn.

2
Golda
DAS ist ja gerade der Haken an der Sache: wenn man etwas einbindet (Google-Kalender zB, Videos von anderen Plattformen usw) hängt man scheinbar in der Falle drin. So habe ich das verstanden.
Auf meiner - bezahlten - Webpage via Strato tauchen tatsächlich tatsächlich irgendwie Webe-Banner auf. Ich mache das mit einem Baukasten und ich komme da nicht weiter.... ich zahle viel Geld für eine Web-Page und dann kommt noch Werbung oben drauf??

2
S.
Wer zu Strato geht, ist eh nicht zu retten.
Erster Schritt bei der Auswahl eines Hosters:
Suche nach "[Hoster] Kündigung Anwalt" oder "... Abzocke". Wenn da jede Menge Suchergebnisse auftauchen, Finger weg!
Als Strato mich bei einer Änderung ebenfalls verarschen wollte, hat mich eine Anwaltsandrohun g gerettet.
Nie wieder Strato oder United Internet (mit 1&1, GMX usw.)!

0

Ich möchte mit eRecht24 chatten!
Datenschutzhinweis: Ihre Daten und Ihre Chateingaben werden in unserem Chat-Tool Brevo verarbeitet, sobald Sie zustimmen, den Chat mit uns zu beginnen. Sie können Ihre Zustimmung jederzeit zurücknehmen. Details hierzu entnehmen Sie unserer Datenschutzerklärung.
eRecht24 - Unsere praktischen Tools und hilfreichen Tutorials

mitgliederbereich teaser

Exklusiv für unsere Mitglieder

Alles was Webseitenbetreiber, Agenturen und Selbständige wirklich brauchen: Tools, Wissen, Musterverträge, Erstberatung und Live-Webinare.

Mehr Informationen

dsgvo teaser

Jetzt eRecht24 Premium Affiliate werden

Als eRecht24 Premium Affiliate Partner empfehlen Sie eine Lösung, mit der bereits mehr als 370.000 Webseiten erfolgreich rechtlich abgesichert wurden und erhalten dafür eine 25% Lifetime Provision!

Jetzt Affiliate werden

webinar teaser

Online Schulung mit RA Siebert

Die 7 häufigsten Abmahnfallen auf Webseiten und wie Sie diese einfach und ohne teuren Anwalt vermeiden. So haben Abmahner keine Chance!

Mehr Details