Unser SEO-Kurs „New Level SEO“ vom 20.02. bis zum 27.02. wieder seine Türen geöffnet!Ja, ich will auf die Warteliste!
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 und 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

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:

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. Dazu sind folgende sieben Schritte notwendig:

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: Schriftarten 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: 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):

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:

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:

Nein, durch Google Fonts, die von Google-Servern geladen werden, werden keine Cookies im Browser deiner Website-Besucher gesetzt.

Nein, im Gegenteil. Wenn du Google Fonts lokal hostest, sollte sich deine Ladezeit eher verbessern.

Das Hauptargument zur Verwendung von Google-Servern war lange Zeit, dass von dort geladene Google Fonts bei Nutzern möglicherweise schon im Browser-Cache sind. Durch Einführung von HTTP Cache Partitioning in Chrome 85 ist dieses Argument jedoch nichtig geworden.

Ich würde dir dazu raten, entweder Arial oder Helvetica zu nutzen. Beide Schriftarten sind nicht nur gut lesbar, sondern sehen auch (verhältnismäßig) modern aus.

Ja, Google Fonts über deinen eigenen Server zu laden, hat auch einige Nachteile:

  1. Etwas größere Belastung deines eigenen Servers
  2. Der Font wird nicht automatisch auf die neuste Version aktualisiert (die über Google-Server ausgelieferten Fonts werden automatisch aktualisiert)
  3. Zeitaufwand oder Mehrkosten durch lokales Einbinden (z. B. bei Zurückgreifen auf einen Dienstleister)
  4. ggf. Installation eines zusätzlichen Plugins, wie OMGF Pro

Folgende Daten werden beim Aufruf von fonts.googleapis.com oder fonts.gstatic.com an Google übermittelt:

  1. Zeitstempel (Zeit des Aufrufs der Webseite)
  2. User Agent (enthält Browser-Version und Betriebssystem von Website-Besuchern)
  3. Referrer (die Webseite über die der Nutzer zur aktuellen Webseite gekommen ist)
  4. verweisende Webseite (Webseite, von der ein Google Font aufgerufen wird)
  5. IP-Adresse des Webseiten-Besuchers

Laut Googles eigenen Angaben werden dabei jedoch nur die ersten vier zu Analysezwecken gespeichert. Die IP-Adresse wird zwar übermittelt, aber nicht gespeichert.

Der beste Weg ist, einen IT-Fachanwalt zu konsultieren. Mittlerweile gibt auch einige Musterschreiben, wie das von Schreiner & Lederer oder Wilde Beuger Solmecke. Diese ersetzen jedoch keine anwaltliche Beratung im Einzelfall.

Finn Hillebrandt

Finn Hillebrandt

Gründer von Blogmojo, SEO-Experte mit 11+ Jahren Erfahrung, WordPress-Fan

Finn hilft Online-Unternehmern mehr Besucher und Kunden über Google zu bekommen.

Er setzt dabei nicht auf Hörensagen, sondern führt ständig eigene Tests und Recherchen durch, um herauszufinden, wie Google wirklich tickt. Achtung, Nerd-Alarm! 🤓

Er teilt sein Wissen hier auf dem Blog in 100+ Fachartikeln zu Online-Business, WordPress und SEO sowie in Online-Kursen, wie seinem SEO-Kurs „New Level SEO“ und seinem Mini-Kurs „Kann ich ranken?“.

Erfahre mehr über Finn und das Team, folge ihm auf Instagram, tritt seiner Facebook-Gruppe SEO & Affiliate-Marketing bei oder mache es wie 10.500+ andere Blogger und Online-Unternehmer und abonniere seinen Newsletter mit exklusiven Marketing-Tipps.

🤩 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!