Unser neuer SEO-Kurs „New Level SEO“ ist da!Ja, zeig mir den Kurs!

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

Google Fonts lokal in WordPress einbinden

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

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

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

Das kann im Rahmen der DSGVO ein rechtliches Risiko darstellen.

Im Folgenden zeige ich dir Schritt für Schritt, wie du Google Fonts in WordPress lokal einbindest, also von deinem eigenen Server anstatt von Google-Servern lädst, und was du dabei beachten solltest.

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.

1.1 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.).

1.2 Plugins oder externer Code

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

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

1.3 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

2. Mach es dir einfach!

Bei manchen Themes kann man in den Theme-Optionen einstellen, dass Google Fonts lokal geladen werden sollen (oder kann sich andere Schritte dieser Anleitung sparen).

Das ist zum Beispiel der Fall bei:

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

Schau unbedingt auch in den Changelog deines Themes! Einige Entwickler haben im Rahmen der DSGVO Anpassungen an Ihren Themes vorgenommen und Updates herausgebracht.

2.1 System-Fonts oder Web Safe Fonts nutzen

Auf vielen meiner Websites, darunter auch Blogmojo, habe ich mich dazu entschieden, Google Fonts durch System-Schriftarten (insbesondere die Apple-Schriftart San Francisco finde ich sehr schick!) oder Web Safe Fonts (wie z. B. Arial) zu ersetzen.

Das erspart nicht nur Arbeit, sondern sorgt auch für eine bessere Ladezeit (und einen schöneren Seitenaufbau). Was das Design betrifft, ist das allerdings nicht immer sinnvoll.

Serifenlose Schriften, wie z. B. Open Sans oder Roboto, lassen sich meines Erachtens sehr gut dadurch ersetzen. Bei Serifen-Schriften würde ich davon absehen. Times New Roman und Georgia z. B. sind schreckliche Schriftarten, die nicht ins Web gehören.

3. Schriftarten herunterladen

Wenn du herausgefunden hast, welche Google Fonts du brauchst, 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:

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 (am besten in einen einfachen Text-Editor).
  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.

4. 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 einen 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

5. 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 Zeichkodierungen benutzen, musst du die einzelnen Code-Abschnitte untereinander einfügen:

CSS von zwei Google Fonts im Child-Theme
Tipp: Wenn du kein Child-Theme hast, findest du bei Webtimiser eine gute Anleitung dazu, wie du dir eins erstellen kannst. Schau auch in die Dokumentation deines Themes, dort gibt es unter Umständen auch Infos dazu oder sogar bereits schlüsselfertige Child-Themes.

6. 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 vorzuladenenden Fonts auch in den Einstellungen eintragen (unter Einstellungen > WP Rocket > Cache füllen > Fonts vorladen):

7. Google Fonts entfernen

Jetzt musst du nur noch dafür sorgen, dass keine Verbindung mehr zu Google-Servern hergestellt wird.

Am leichtesten geht das per Plugin. So vermeidest du, im Code deines Themes herumzuwurschteln (bei manchen Themes ist es gar nicht so leicht, deren Ursprung ausfindig zu machen).

7.1 Autoptimize

Als erstes würde ich es Autoptimize probieren, das ohnehin ein sehr sinnvolles Plugin ist, um deine Ladezeit zu verbessern.

Google Fonts lassen sich dort Einstellungen > Autoptimize > Extras > Google Fonts entfernen:

Google Fonts entfernen mit Autoptimize

Und wenn du gerade dabei bist, kannst du noch ein Häkchen bei Emojis entfernen setzen. Zwei Fliegen mit einer Klappe (und du deine Website lädt wieder ein paar Millisekunden schneller)!

7.2 perfmatters

Ein weiteres sehr gutes Performance-Plugin, mit dem du Google Fonts entfernen kannst, ist perfmatters.

Dazu musst du in den Plugin-Einstellungen unter General > Options den Schalter bei Remove Google Fonts umlegen:

8. 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 hergestellt werden.

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

Jetzt schaust du dir deine Website (am besten ausgeloggt) in den Entwickler-Tools an.

9. Nachteile davon, Google Fonts lokal einzubinden

Google Fonts über deinen eigenen Server zu laden hat einige Nachteile, auf die ich auch kurz eingehen möchte:

  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

Und nein, falls du dich das gefragt hast:

Eine bessere Ladezeit oder bessere Core Web Vitals sind durch die Verwendung von Google-Servern nicht zu erwarten.

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

Finn Hillebrandt

Finn Hillebrandt

Gründer von Blogmojo, WordPress-Fan und SEO-Experte mit 10+ Jahren Erfahrung.

Finns große Leidenschaft ist es, epische Blogartikel zu schreiben und bei Google zu ranken (und nein, dass du hier gelandet bist, ist kein Zufall). 😎

Sein Motto und seine Mission lauten: Unf*ck SEO! ✊

Bei SEO setzt er entsprechend nicht auf Hörensagen, sondern führt ständig eigene Tests und Recherchen durch, um herauszufinden, wie Google wirklich tickt (Achtung, Nerd-Alarm!).

Erfahre mehr über ihn und das Team oder folge ihm auf Instagram, Twitter, LinkedIn oder Facebook.

Werbehinweis für Links mit Sternchen (*)

Es handelt sich um einen Affiliate-Link, das heißt, wenn du auf der verlinkten Website etwas kaufst, erhalten wir eine Provision. Dies hat keinerlei Einfluss darauf, wie wir ein Tool oder einen Anbieter bewerten.

Wir empfehlen nur Tools bzw. Anbieter, hinter denen wir auch wirklich stehen. Für dich entstehen dadurch natürlich keine zusätzlichen Kosten! Du hilfst jedoch uns und diesem Projekt. Danke! ❤️

SEO-Kurs

Der SEO-Kurs, der dein Business auf ein neues Level bringt.

Jetzt verfügbar! Bis zum 26.10. um 22 Uhr gibt es 20 % Einführungsrabatt.

Ja, zeig mir den Kurs!