Google Fonts lokal & DSGVO-konform in WordPress einbinden

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 sämtliche Google Fonts auf deiner Website, lädt sie von deinem eigenen Server und deaktiviert gleichzeitig alle Instanzen, die von Google-Servern kommen.

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 zusätzlich diverse Optionen für Fortgeschrittene.

Und für nur 39 € pro Jahr (Business License) ist es ein absoluter No-Brainer!

2. Die manuelle Methode

Wenn du technisch versiert bist oder keine Lust darauf hast, ein Plugin zu verwenden, kannst du Google Fonts natürlich auch 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, musst du zunächst herausfinden, 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 zum Beispiel bei meinem Theme GeneratePress aus:

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

Bei manchen Themes kannst du zudem 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 einstellen, dass Google Fonts lokal geladen werden)
• 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 ruhigeren Seitenaufbau.

Allerdings musst du dafür Abstriche beim Design machen – eine Standardschrift wie Arial sieht nun einmal nicht so elegant aus wie Open Sans oder Roboto.

Plugins oder externer Code

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

• Google Maps, reCAPTCHA und einigen anderen Google-Diensten
• Easy Google Fonts
• WP Google Fonts
• NextGEN Gallery (lädt Open Sans)

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 geladen werden.

Entwickler-Konsole

Zu guter Letzt solltest du in der Entwickler-Konsole deines Browsers nachschauen, welche Google Fonts geladen werden. Klicke dazu auf deiner eigenen Website mit der rechten Maustaste und wähle „Element untersuchen“.

Nun öffnet sich die Konsole. 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 in der Regel unter folgenden Punkten:

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

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

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 brauchst:

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

1. Bei Select charsets kannst du meist alles so lassen, wie es ist. Nur wenn dein Blog beispielsweise auf Griechisch ist, musst du zusätzlich greek wählen; für osteuropäische Sprachen kommen weitere Zeichensätze hinzu.
2. Bei Select styles wählst du die Stärken aus, die du auf deinem Blog verwendest. Auf jeden Fall solltest du 700 (Fettschrift) hinzufügen, sonst wirkt Bold unsauber.
3. Bei Copy CSS lässt du „Best Support“ ausgewählt und kopierst den CSS-Code in einen einfachen Text-Editor.
4. Jetzt kannst du das Font-Paket im ZIP-Format herunterladen.

Wenn du mehrere Google Fonts verwendest, wiederholst du die Schritte einfach und kopierst den CSS-Code der weiteren Fonts unter den ersten.

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

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

Dazu öffnest du FileZilla (oder ein anderes FTP-Programm) und gehst 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 etwa so aussehen:

Schritt #4: CSS-Code einfügen

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

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

Wenn du mehrere Schriftarten, Schriftstärken oder Zeichensätze nutzt, musst du die einzelnen Code-Abschnitte einfach untereinander einfügen:

Schritt #5: FOIT und FOUT vermeiden

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

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

FOIT und FOUT sind nicht nur nervig für Nutzer, sondern können auch einen hohen Cumulative Layout Shift auslösen 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 verschwindet FOIT, dafür entsteht jedoch FOUT.

Den entstandenen FOUT kannst du beseitigen, indem du deine Fonts per <link rel="preload"> vorlädst. Das sieht im HTML so aus:

<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 direkt in den Einstellungen hinterlegen (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 WPBakery.

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:

perfmatters

Mit perfmatters schaltest du Google Fonts aus, indem du unter General > Options den Schalter bei „Remove Google Fonts“ aktivierst:

Schritt #7: Das Ergebnis überprüfen

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

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

Anschließend 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), ob noch Verbindungen zu fonts.googleapis.com oder fonts.gstatic.com hergestellt werden.

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