Google Fonts sind eine beliebte Möglichkeit, um Websites mit ansprechenden Schriftarten auszustatten. Viele WordPress- und Elementor-Nutzer greifen auf Google Schriften zurück, die Google kostenlos bereitstellt. Doch Vorsicht: Wenn Google Fonts direkt von den Servern von Google geladen werden, kann das ein Datenschutzproblem darstellen und gegen die DSGVO (Datenschutzgrundverordnung) verstoßen.
In diesem Artikel erfährst du, warum das externe Laden von Google Schriftarten problematisch ist und wie du Google Fonts lokal einbinden kannst (Schritt-für-Schritt-Anleitung für WordPress und Elementor). So stellst du sicher, dass deine Website keine unnötigen rechtlichen Risiken birgt.
Warum das Laden von Google Fonts nicht DSGVO-konform ist
Wenn du Google Schriftarten auf deiner Website verwendest, werden sie direkt vom Google Server auf deine Website geladen. Dabei wird eine direkte Verbindung vom Gerät deiner Website-Besucher zu Google hergestellt.
Welche Daten dabei an Google gesendet werden
Jedes Mal, wenn eine Google Schriftart von den Google-Servern geladen wird, werden automatisch Informationen an Google übermittelt. Dazu gehören:
- Die IP-Adresse des Besuchers
- Browser- und Geräteinformationen
- Besuchte Seiten auf deiner Website
- Zeitpunkt des Zugriffs
Das verstößt prinzipiell gegen die DSGVO, weil personenbezogene Daten ohne ausdrückliche Zustimmung des Nutzers an Drittländer weitergegeben werden.
Was Gerichte dazu sagen
Es gibt bereits mehrere Urteile, die Webseitenbetreiber zur Zahlung von Schadensersatz verurteilt haben, wenn sie Google Fonts ohne Einwilligung extern eingebunden haben. Ein bekanntes Urteil aus Deutschland (LG München, Az. 3 O 17493/20) bestätigt, dass die Weitergabe der IP-Adresse an Google ohne Zustimmung gegen Datenschutzrecht verstößt. Um solche Risiken zu vermeiden, solltest du Google Schriftarten lokal einbinden.
Google Fonts lokal einbinden in Elementor – Schritt für Schritt
Elementor lädt standardmäßig die Schriftarten, die du im Pagebuilder siehst, von Google. Damit hast du theoretisch eine riesengroße Auswahl an Schriftarten, die du auf deiner Website verwenden kannst.Richtig, nur theoretisch. Praktisch ist das nicht datenschutzkonform, weil sie direkt von Google geladen werden.
Um Google Fonts datenschutzkonform einzubinden, musst du Google Fonts in Elementor deaktivieren und deine Schriftarten lokal auf deine Website hochladen. Wie das geht, zeige ich dir jetzt.
Schritt 1: Google Fonts in Elementor deaktivieren
Gehe in WordPress links im Menü zu Elementor > Einstellungen und klicke oben auf den Reiter „Erweitert“. Wähle unter Google Fonts im Drop-Down-Menü „Deaktivieren“ aus. Speichere deine Änderungen anschließend über den blauen Button ganz unten.
Um die Schriftart, die du verwenden möchtest, nun auf deine Website hochzuladen, brauchst du erstmal verschiedene Dateitypen deiner Schriftart.
Gehe folgendermaßen vor, um Google Schriften lokal auf deine Website hochzuladen:
Schritt 2: Schriftart von Google herunterladen
Suche dir deine Schriftart unter https://fonts.google.com/, klicke sie an und klicke dann auf den Button „get font“.
Klicke anschließend auf „Download all“ und speichere dir die Schrift lokal auf deinem Computer.
Am besten speicherst du sie gleich im richtigen Verzeichnis für Schriftarten. Unter Windows ist das in der Regel C:/Fonts.
Du findest dort jetzt einen ZIP-Ordner mit deiner gewünschten Schriftart. In diesem Beispiel hier wäre das „Quicksand.zip“. In diesem ZIP-Ordner befinden sich mehrere Dateien, so wie hier:
Entpacke zuerst einmal den ZIP-Ordner und mache dann weiter mit Schritt 2.
Schritt 3: Schriftartdatei in mehrere Dateiformate umwandeln
Anschließend musst die die Schriftarten-Datei, die du von Google heruntergeladen hast, noch in andere Dateiformate umwandeln. Dafür empfehle ich dir den Webfont Generator von transfonter.org. Dort kannst du kostenlos Schriftarten in verschiedene Dateitypen umwandeln.
Klicke zuerst auf den blauen Button „Add fonts„. Es öffnet sich ein Explorer-Fenster, in dem du Dateien von deinem Computer auswählen kannst. Suche die die TrueType-Schriftartendatei aus deinem entpackten ZIP-Ordner von Google Fonts und lade sie hier hoch.
Anschließend musst du dem Webfont Generator sagen, welche Dateiformate du benötigst. Wähle alle fünf aus: TTF, EOT, WOFF, WOFF2, SVG.
Nun klickst du oben auf den grünen Button „Convert“. Der Webfont Generator erstellt dann innerhalb weniger Sekunden deine gewünschten Dateien.
Wenn deine Schriften fertig konvertiert sind, siehst du folgende Links: Download und Preview. Klicke auf „Download“. Es wird ein ZIP-Ordner heruntergeladen, den du dir auf deinem Computer am besten wieder im Verzeichnis deiner Schriftarten speicherst.
Standardmäßig hat der ZIP-Ordner von Transfonter einen sehr langen, kryptischen Namen („transfonter.org-20250210-164612.zip“). Damit kann natürlich später niemand mehr etwas anfangen. Ich benenne den ZIP-Ordner einfach immer um und gebe ihm denselben Namen wie die Schriftart, nur mit der Ergänzung „transfonter“. Also in unserem Beispiel so: „Quicksand – transfonter.zip“. Dann weiß ich später noch, dass sich dort alle Schriftartdateien von Quicksand befinden.
Nachdem du den ZIP-Ordner heruntergeladen hast, entpackst du ihn. Wenn du ihn öffnest, siehst du, dass dort jetzt mehrere Dateitypen enthalten sind:
- Quicksand.svg
- Quicksand.ttf
- Quicksand.eot
- Quicksand.woff
- Quicksand.woff2
Diese fünf Dateien lädst du nun auf deine Website hoch. Und das geht so:
Schritt 4: Schriftarten in Elementor hochladen
Gehe nun links im WordPress-Menü zu Elementor – Eigene Schriften. Klicke oben auf den grauen Button „Add New Font“.
In das Feld, wo „Schriftfamilie eingeben“ steht, gibst du den Namen deiner Schriftart ein und klickst anschließend auf „Add Static Font“ (springe zu diesem Absatz, um zu erfahren, was der Unterschied zwischen variable font und static font ist).
Nun klickst du einzeln nacheinander auf den Button „hochladen“ neben dem jeweiligen Dateitypen.
Zuerst öffnet sich das Upload-Fenster der WordPress-Mediathek. Da klickst du auf den Reiter „Dateien hochladen“.
Es öffnet sich ein Explorer-Fenster, in dem du die jeweilige Datei deiner Schriftart auf deiner Festplatte auswählen kannst. Die Datei wird nun in deine WordPress-Mediathek hochgeladen. Klicke abschließend unten rechts auf den Button „.woff Datei auswählen“. Deine erste Datei ist hochgeladen. Wiederhole diese Schritte nun noch für die anderen vier Dateitypen.
Fertig! Deine Schriftarten sind nun hochgeladen, Google Fonts sind deaktiviert und in Elementor findest du deine neu hinzugefügten Schriftarten unter „Eigene Schriften“ – bereit zur Verwendung.
Exkurs: Variable Fonts vs. Static Fonts – Was ist der Unterschied?
Beim Hochladen deiner Google Schriftarten in Elementor hast du die Wahl zwischen Static Fonts und Variable Fonts. Doch worin liegt der Unterschied, und welche Option ist die bessere Wahl?
Static Fonts (statische Schriftarten)
- Jede Schriftvariante (z. B. fett, kursiv, unterschiedliche Größen) wird als eigene Datei gespeichert.
- Kann zu vielen separaten Dateien führen, wenn du mehrere Schriftstile benötigst.
- Ist in den meisten Fällen einfacher in der Handhabung.
- Kann bei vielen Varianten die Ladezeit leicht erhöhen.
Variable Fonts (variable Schriftarten)
- Enthält alle Varianten (Dicke, Neigung etc.) in einer einzigen Datei.
- Spart Speicherplatz und kann die Ladezeit optimieren.
- Bietet mehr Flexibilität bei der Gestaltung.
- Wird noch nicht von allen Browsern und Plattformen unterstützt.
Welche Variante ist besser?
Für die meisten Websites sind Static Fonts die einfachere und sicherere Wahl, da sie von allen Browsern unterstützt werden und unkompliziert funktionieren. Wenn du jedoch maximale Flexibilität möchtest und sicherstellen kannst, dass alle Besucher moderne Browser nutzen, kann ein Variable Font die bessere Wahl sein.
Ich lade meine Schriftarten immer als Static Font hoch und hatte noch nie Probleme damit, sie in Elementor trotzdem in mehreren Schriftstilen (dick, dünn usw.) zu verwenden.
Fazit
Das direkte Laden von Google Schriftarten über externe Server ist nicht DSGVO-konform und kann rechtliche Konsequenzen haben. Die beste Lösung ist es, Google Fonts lokal einzubinden.
Mit den richtigen Einstellungen in Elementor kannst du Google Fonts einbinden, ohne Datenschutzprobleme zu riskieren. Hier noch einmal die Schritte zusammengefasst:
- Google Fonts in Elementor deaktivieren
- Schriftart von Google herunterladen
- Schriftart in fünf verschiedene Dateiformate konvertieren (TTF, WOFF, WOFF2, SVG, EOT)
- Schriftart als „static font“ in Elementor hochladen
FAQ – Häufige Fragen
Kann ich Google Fonts überhaupt noch nutzen?
Ja! Du kannst Google Fonts weiterhin verwenden, aber sie müssen lokal auf deinem eigenen Server gespeichert werden, um DSGVO-konform zu sein.
Was passiert, wenn ich weiterhin Google Fonts extern lade?
Es besteht die Gefahr, dass Besucher deiner Website ihre Rechte geltend machen und du abgemahnt wirst. In Deutschland gab es bereits Urteile, die Webseitenbetreiber zu Schadenersatzzahlungen verpflichteten.
Kann ich mehrere eigene Schriftarten in Elementor hochladen?
Klar! Du kannst so viele verschiedene Schriftarten hochladen, wie du möchtest.
Beeinflusst die lokale Einbindung die Ladezeit meiner Website?
In den meisten Fällen verbessert eine lokale Einbindung die Ladezeit, weil die Google Schriftarten direkt vom eigenen Server geladen werden und kein externer Request zu Google erforderlich ist.
