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

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

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:

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:

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

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:

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:

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:

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

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.

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