⚡️ Unser neuer ChatGPT-Powerkurs mit 500+ deutschen Prompts ist da!👉 Ja, zeig mir den ChatGPT-Kurs!
Bessere Text mit ChatGPT

27-seitiges E-BOOk für 0 €

14 simple Tipps, mit denen ChatGPT dramatisch bessere Texte schreibt

In unserem E-Book zeigen wir dir, wie du mit kleineren Änderungen oder Ergänzungen in deinen Prompts mit ChatGPT deutlich bessere Texte schreibst.

Wie du Google Fonts lokal & DSGVO-konform in WordPress einbindest

Google Fonts lokal in WordPress einbinden
Foto des Autors

Finn Hillebrandt

Zuletzt aktualisiert:

Wenn du Google Fonts standardmäßig eingebunden hast, das heißt über Google-Server, werden mitunter Daten wie die IP-Adresse oder der verwendete Browser an Google übermittelt.

Laut Google werden durch die Fonts zwar keine Cookies gespeichert und die Daten auch nicht mit Google-Konten in Verbindung gebracht.

Aber da Google Fonts von bestimmt jeder zweiten Website verwendet wird, könnte Google dadurch Nutzeraktivitäten im Internet im großen Stil nachverfolgen.

Das kann im Rahmen der DSGVO ein akutes rechtliches Risiko darstellen:

Im Januar 2022 wurde z. B. einer Website-Betreiberin im Rahmen eines Urteils des LG München eine Schadensersatzzahlung auferlegt, weil sie Google Fonts auf ihrer Website eingebunden hatte, die über Google-Server geladen wurden. Seitdem werden massenhaft Abmahnungen und Schadensersatzforderungen an Website-Betreiber herausgeschickt.

Aber keine Sorge:

Im Folgenden zeige ich dir Schritt für Schritt, wie du Google Fonts deaktivierst und lokal in deine WordPress-Website einbindest (also selbst hostest anstatt von Google-Servern zu laden):

1. Mit dem Plugin OMGF Pro

OMGF Pro

Die mit Abstand einfachste und schnellste Option, um Google Fonts lokal einzubinden, ist das kleine, aber geniale WordPress-Plugin OMGF Pro.

Es findet nicht nur sämtliche Google Fonts auf deiner Website und lädt sie von deinem eigenen Server, sondern deaktiviert auch alle Instanzen, die von Google-Servern geladen werden. 💪

Dabei ist das Plugin sehr leicht zu bedienen. Nach der Installation musst du in den Einstellungen einfach nur auf „Speichern & Optimieren“ klicken und in wenigen Sekunden werden alle Google Fonts erkannt und lokal geladen:

Mit OMGF Google Fonts erkennen und lokal einbinden

Heißt:

Es erledigt alle Schritte für dich (und bietet dabei noch diverse Optionen für Fortgeschrittene).

Und für nur 19 € pro Jahr ist es ein absoluter No-Brainer! 😊

Hinweis: Es gibt auch eine kostenlose Version von OMGF. Ich rate jedoch davon ab, da diese nur einen abgespeckten Fonts-Scanner mitbringt. Im Gegensatz zu OMGF Pro findet die kostenlose Version zum Beispiel keine Google Fonts, die per JavaScript nachgeladen werden. Zudem fehlen einige wichtige Funktionen, wie das Festlegen eines Fallback-Fonts.

2. Die manuelle Methode

Wenn du technisch versiert bist oder keine Lust darauf hast, ein Plugin zu verwenden, kannst du natürlich auch Google Fonts manuell lokal einbinden.

Zum Einbinden der Google Fonts sind folgende sieben Schritte notwendig:

  1. Herausfinden, welche Google Fonts du nutzt
  2. Schriftarten herunterladen
  3. Google Fonts auf den FTP-Server hochladen
  4. CSS-Code einfügen
  5. FOIT und FOUT vermeiden
  6. Google Fonts deaktivieren
  7. Das Ergebnis überprüfen

Schritt #1: Herausfinden, welche Google Fonts du nutzt

Damit du Google Fonts lokal einbinden kannst, ist es zunächst notwendig herauszufinden, welche Fonts überhaupt auf deiner Website verwendet werden:

Theme-Optionen

Der erste Anhaltspunkt dafür sind die Theme-Optionen. Diese findest du im WordPress-Adminbereich wahrscheinlich an einem dieser Orte:

  • in einem eigenen Menüpunkt
  • in einem Unterpunkt von Design oder Einstellungen
  • unter Design > Customizer

Dort angekommen suchst du nach einem Unterpunkt wie Typografie, Typography, Fonts oder Schriftarten. So sieht das z. B. bei meinem Theme GeneratePress aus:

Google Fonts im Customizer einstellen

Hast du die entsprechenden Fonts gefunden, öffnest du einen Text-Editor und schreibst dir auf, welche Google Fonts genau verwenden werden und in welcher Stärke (100, 200, 300, 400, 500, 600, 700, 800, 900, normal, bold etc.).

Bei manchen Themes kannst du auch direkt einstellen, dass die über das Theme geladenen Google Fonts lokal geladen werden sollen.

Das ist zum Beispiel der Fall bei:

  • Avada (unter Avada > Theme Options > Advanced > Privacy > Google Fonts Mode kannst du direkt einstellen, dass Google Fonts lokal geladen werden sollen)
  • Divi (bietet die Option, eigene Schriftarten zu nutzen)
  • Enfold (bietet die Option, eigene Schriftarten zu nutzen)
  • Themes von ThemeZee (siehe Blogpost zu DSGVO-Updates)

Manche WordPress-Themes, wie GeneratePress, Astra oder Kadence erlauben dir auch System-Fonts oder Web Safe Fonts als Alternative zu Google Fonts zu nutzen.

Das erspart nicht nur Arbeit, sondern sorgt auch für bessere Ladezeiten und einen schöneren Seitenaufbau.

Dafür musst du allerdings Abstriche beim Design machen. Eine Standard-Schriftart wie Arial ist leider nicht so schön wie Open Sans oder Roboto. 🤷‍♂️

Plugins oder externer Code

In manchen Fällen werden Google Fonts auch freiwillig oder unfreiwillig über Plugins oder externen Code eingebunden. Das ist etwa der Fall bei:

Bei Google Maps, reCAPTCHA und anderen externen Ressourcen, die über iframes geladen werden, bleibt dir oft nichts anderes übrig, als diese Ressourcen komplett zu entfernen, um zu verhindern, dass Google Fonts auf deiner Website geladen werden.

Entwickler-Konsole

Zu guter Letzt solltest du in der Entwickler-Konsole in deinem Browser nachschauen, welche Google Fonts geladen werden. Dazu klickst du auf deiner eigenen Website auf die rechte Maustaste und dann auch „Element untersuchen“.

Nun sollte sich auf der rechten Seite oder unten die Konsole geöffnet haben. Dort klickst du auf den Tab „Sources“. Jetzt kannst du alle Quellen sehen, die deine Website nutzt, um Ressourcen zu laden.

Google Fonts verbergen sich unter folgenden Punkten:

  • fonts.googleapis.com
  • fonts.gstatic.com

In diesem Beispiel werden die Google Fonts „Rufina“ und „Source Sans Pro“ verwendet (gebündelt in einer einzigen Serverabfrage). Auf der rechten Seite kann man sehen, welche Schriftstärken und Zeichenkodierungen genau verwendet werden:

Google Fonts in der Entwicklerkonsole
Wichtig: Untersuche nicht nur deine Startseite oder eine einzelne Seite, sondern mehrere verschiedene Seiten deiner Website. Denn ja nach Seite oder Seitentyp, können andere Dienste oder Plugins zum Einsatz kommen, die Google Fonts laden können.

Schritt #2: Google Fonts herunterladen

Wenn du herausgefunden hast, welche Google Fonts du benötigst, musst du diese herunterladen.

Am einfachsten geht das über den Google Webfonts Helper, der dir gleichzeitig den CSS-Code mitliefert, den du in Schritt 4 benötigst:

Google Webfonts Helper

Zuerst wählst du auf der linken Seite den entsprechenden Font aus. Anschließend musst du diesen noch konfigurieren.

  1. Bei Select charsets (Charset = Zeichenkodierung) kannst du alles so lassen, wie es ist. Es sei denn dein Blog ist auf Griechisch (dann musst du zusätzlich greek auswählen) oder auf einer osteuropäischen Sprache (z. B. Polnisch, Tschechisch oder Rumänisch).
  2. Bei Select styles wählst du die Stärken aus, die du auf deinem Blog verwendest. Auf jeden Fall solltest du 700 dazu nehmen, das entspricht Fettschrift. Wenn du das nicht machst, sieht Fettschrift dann ausgefranst aus.
  3. Bei Copy CSS wählst du „Best Support“ aus (voreingestellt) und kopierst den CSS-Code heraus und in einen einfachen Text-Editor hinein.
  4. Jetzt kannst du Font-Paket herunterladen (im ZIP-Format)!

Wenn du mehrere Google Fonts verwendest, wiederhole die Schritte einfach und kopiere den CSS-Code des zweiten oder dritten Fonts unter den ersten.

Schritt #3: Google Fonts auf den FTP-Server hochladen

Nachdem dein Font-Paket heruntergeladen und entpackt hast, musst du die Font-Dateien auf deinen FTP-Server hochladen.

Dazu öffnest du FileZilla (oder ein FTP-Programm deiner Wahl) und gehst zu in das Hauptverzeichnis deiner Domain (dort, wo sich WordPress befindet).

Dort legst du einen Ordner an, der fonts heißt und kopierst die heruntergeladenen Schriftarten hinein. Das Ganze sollte dann in etwa so aussehen:

Google Fonts auf FTP-Server hochladen

Schritt #4: CSS-Code einfügen

Damit Browser wissen, wo sich deine hochgeladenen Font-Dateien befinden, musst du Ihnen dies per CSS sagen.

Dazu kopierst du den CSS-Code, den du in Schritt 3 im Text-Editor zwischengespeichert hast, in die style.css-Datei deines Child-Themes. Das sieht dann so aus:

Google Fonts CSS im Child-Theme

Solltest du mehrere verschiedene Schriftarten, Schriftstärken und/oder Zeichenkodierungen nutzen, musst du die einzelnen Code-Abschnitte untereinander einfügen:

CSS von zwei Google Fonts im Child-Theme
Tipp: Wenn du kein Child-Theme hast, schaue dir unsere umfassende Anleitung dazu an. In der Dokumentation deines Themes findest du unter Umständen auch Infos dazu oder sogar bereits schlüsselfertige Child-Themes.

Schritt #5: FOIT und FOUT vermeiden

Wenn du Google Fonts verwendest, kann es zu zwei unschönen Phänomen kommen:

  1. Flash of Invisible Text (FOIT): Es wird gar kein Text angezeigt, bevor deine Google Fonts geladen werden
  2. Flash of Unstyled Text (FOUT): Es wird zunächst ein Standard-Font angezeigt, der dann durch deine Google Fonts ausgetauscht werden.

FOIT und FOUT sind nicht nur nervig für Nutzer, sondern können auch einen hohen Cumulative Layout Shift (CLS) hervorrufen und dafür sorgen, dass du den Core Web Vitals-Test nicht bestehst.

Um beides zu vermeiden, solltest du zunächst font-display: swap zu @font-face hinzufügen (dadurch wirst du FOIT los, erzeugst aber dadurch FOUT).

Um den entstandenen FOUT loszuwerden, kannst du <link rel="preload"> nutzen, um deine Fonts vorzuladen. Das würde dann im HTML so aussehen:

<head>
<link rel="preload" href="/fonts/inter-v2-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
</head>

Falls du WP Rocket verwendest, kannst du die vorzuladenden Fonts auch in den Einstellungen eintragen (unter Einstellungen > WP Rocket > Cache füllen > Fonts vorladen):

Google Fonts mit WP Rocket vorladen

Schritt #6: Google Fonts deaktivieren

Um Google Fonts zu deaktivieren, also zu verhindern, dass eine Verbindung zu Google-Servern hergestellt wird, ist es am einfachsten das kostenlose Plugin Disable and Remove Google Fonts zu installieren.

Das Plugin sollte die Google Fonts vieler gängiger Themes, wie Avada, Enfold, Hestia, Kadence und allen Standard-Themes (Twenty Twenty, Twenty Nineteen usw.) deaktivieren.

Es funktioniert zudem mit bekannten Page-Buildern wie Divi, Elementor oder WPBackery.

Warnung: Das Plugin sollte für viele Anwendungsfälle ausreichen, es kann aber sein, dass einige hartnäckige Instanzen trotzdem geladen werden. In dem Fall solltest du OMGF Pro verwenden, das diese Instanzen besser erkennen und deaktivieren kann. Denn solange noch Verbindungen zu Google-Servern hergestellt werden, besteht auch das rechtliche Risiko weiterhin.

Auch manche Performance-Plugins erlauben dir, Google Fonts zu deaktivieren. Falls du z. B. Autoptimize oder perfmatters verwendest, kannst du dir „Disable and Remove Google Fonts“ sparen:

Autoptimize

Mit Autoptimize lassen sich Google Fonts unter Einstellungen > Autoptimize > Extras > Google Fonts deaktivieren:

Google Fonts entfernen mit Autoptimize
Tipp: Setze auch gleich ein Häkchen bei „Emojis entfernen“. Dadurch schlägst du gleich zwei Datenschutz- und Ladezeit-Fliegen mit einer Klappe.

perfmatters

Mit perfmatters kannst du Google Fonts ausschalten, in dem du unter General > Options den Schalter bei „Remove Google Fonts“ umlegst:

Google Fonts mit perfmatters deaktivieren

Schritt #7: Das Ergebnis überprüfen

Hast du alle Schritte erledigt, musst du nur noch überprüfen, ob deine lokalen Fonts richtig geladen und ob noch Verbindungen zu Google-Servern hergestellt werden.

Dazu löschst du zunächst den Cache deines Caching- oder Performance-Plugins sowie die Dateien in deinem Browser-Cache.

Jetzt schaust du dir deine Website am besten ausgeloggt oder in einem Inkognitofenster an und überprüfst mit den Entwickler-Tools von Chrome (siehe Schritt #1) abschließend, ob noch Verbindungen zu fonts.googleapis.com oder fonts.gstatic.com hergestellt werden.

Denke daran, nicht nur die Startseite zu testen, sondern auch deine Beiträge, Kategorien, Schlagwörter oder Seiten. Denn es kann immer sein, dass Google Fonts über ein Plugin geladen werden, das nicht auf allen Seiten aktiv ist.

3. FAQ

Hier habe ich dir Antworten auf häufige Fragen rund um Google Fonts zusammengestellt:

Werden durch Google Fonts Cookies gesetzt?

Verschlechtert es meine Ladezeit, Google Fonts lokal zu hosten?

Welche Web Safe Fonts sind eine gute Alternative zu Google Fonts?

Hat es Nachteile, Google Fonts lokal einzubinden?

Welche Daten werden durch Google Fonts von Google verarbeitet?

Was tun bei einer Abmahnung oder Schadensersatzforderung wegen Google Fonts?

Finn Hillebrandt

Über den Autor

Finn Hillebrandt ist der Gründer von Blogmojo und Blogmojo.ai, SEO-Experte mit 13+ Jahren Erfahrung und KI-Nerd.

Er hilft Online-Unternehmern mehr Kunden über Google zu bekommen und ihre Prozesse mit KI-Tools zu vereinfachen und zu automatisieren.

Finn teilt sein Wissen hier auf dem Blog in 170+ Fachartikeln zu KI-Tools, WordPress und SEO sowie über seinen ChatGPT-Kurs und den SEO-Kurs New Level SEO mit zusammengenommen 600+ Teilnehmern.

Erfahre mehr über Finn und das Team, folge Blogmojo auf Instagram, tritt seiner Facebook-Gruppe zu ChatGPT, OpenAI & KI-Tools bei oder mache es wie 17.500+ andere und abonniere seinen KI-Newsletter mit Tipps, News und Angeboten rund um KI-Tools und Online-Business

🤩 Noch mehr genialer Content? Unsere Angebote für 0 €!

Gesetze erfolgreicher Blogartikel

14 Gesetze unglaublich erfolgreicher Blogartikel

Lerne, wie du Blogartikel schreibst, die tausende Besucher im Monat bekommen und tausendfach geteilt werden.

SEO-Fehler

10 SEO-Fehler, die dich in 2023 deine Rankings kosten

Du willst in 2023 mehr Kunden und Leser über Google bekommen? Dann solltest du diese 10 Fehler vermeiden.

Instagram Case Study

Case Study: Von 2K auf 100K Instagram-Follower in nur 3 Monaten

Wir zeigen dir, wie wir es geschafft haben, in nur 3 Monaten von 2K auf 100K Instagram-Follower zu kommen.

Online-Business Case Study

Case Study: 250.000 € Umsatz mit Online-Kursen

Wir zeigen dir, wie wir über 250.000 € Umsatz mit Online-Kursen gemacht haben. Ohne Ads, ohne Social Media und ohne Kaltakquise.

Bessere Texte mit ChatGPT

14 simple Tipps, mit denen ChatGPT dramatisch bessere Texte schreibt

ChatGPTs Schreibstil ist von Haus aus eher mittelmäßig. Texte enthalten z. B. Wiederholungen oder klingen monoton.

In unserem E-Book zeigen wir dir, wie das Tool mit kleineren Änderungen deutlich bessere Texte schreibt. 💪

👉 Ja, zeig mir das E-Book!