Google Fonts lokal einbinden: 5 einfache Schritte für WordPress
Google Fonts lokal einbinden: 5 einfache Schritte für WordPress
Schöne Schriften machen eine Website unverwechselbar. Werden Google Fonts allerdings direkt von Google-Servern geladen, stellt der Browser beim Seitenaufruf eine Verbindung zu Google her. Dabei wird unter anderem die IP-Adresse des Besuchers übertragen.
Möchtest du Google Fonts lokal einbinden, liegen die benötigten Schriftdateien stattdessen auf deinem eigenen Server. Deine Website muss sie dann nicht bei jedem Aufruf von Google abrufen.
In dieser Anleitung zeige ich dir Schritt für Schritt, wie du herausfindest, ob deine WordPress-Website Google Fonts extern lädt, wie du Google Fonts lokal einbinden kannst und wie du anschließend kontrollierst, ob wirklich keine unerwünschten Font-Anfragen mehr an Google gehen.
Die Vorgehensweise funktioniert unter anderem mit Block-Themes, Astra, Elementor und Divi. Außerdem zeige ich dir eine Plugin-Lösung und den manuellen Weg per CSS.
Warum solltest du Google Fonts lokal einbinden?
Viele WordPress-Themes und Page Builder können Google Fonts direkt über die Google-Fonts-Server laden. Der Browser ruft dabei zunächst ein Stylesheet von fonts.googleapis.com und anschließend die eigentlichen Schriftdateien beispielsweise von fonts.gstatic.com ab. Dabei entsteht eine Verbindung zwischen dem Browser deines Besuchers und Google.
Gerade aus Datenschutzsicht wird diese dynamische Einbindung in Deutschland und der EU kritisch gesehen.
Wenn du Google Fonts lokal einbindest, werden die Schriftdateien dagegen direkt von deiner eigenen Website ausgeliefert. Für den Abruf dieser Schriftdateien ist dann keine zusätzliche Verbindung zu den Google-Fonts-Servern erforderlich.
Ein möglicher Nebeneffekt ist, dass der Browser keine zusätzliche Verbindung zu den Google-Fonts-Servern aufbauen muss. Ob sich das tatsächlich positiv auf die Ladezeit auswirkt, hängt allerdings stark von deinem Hosting, Caching, CDN, den verwendeten Schriftdateien und der bisherigen Einbindung ab.
Google Fonts lokal einbinden solltest du deshalb nicht mit dem Versprechen verbinden, dass deine Website dadurch automatisch schneller wird. Der wichtigste Vorteil ist, dass du die Auslieferung der Schriftdateien selbst kontrollierst und unnötige externe Verbindungen vermeiden kannst.
Mehr Tipps zur Ladezeit findest du in meinem Beitrag WordPress Geschwindigkeit optimieren. Was du beim Thema Datenschutz sonst noch auf deiner Website beachten solltest, erfährst du außerdem in SSL, DSGVO & Co. – Grundlagen für deine Webseite und in Abmahnung Impressum: Was du jetzt ändern musst.
Google Fonts lokal einbinden: die Kurzanleitung
Der Ablauf lässt sich auf fünf Schritte reduzieren:
- Backup erstellen: Sichere deine WordPress-Website.
- Website prüfen: Finde heraus, ob Google Fonts extern geladen werden.
- Google Fonts lokal einbinden: Nutze dein Theme, deinen Page Builder, ein Plugin oder CSS.
- Externe Font-Anfragen überprüfen: Stelle sicher, dass keine parallele Verbindung zu Google bestehen bleibt.
- Cache leeren und kontrollieren: Prüfe deine Website anschließend erneut mit den Browser-Entwicklertools.
Gehen wir die einzelnen Schritte genauer durch.
Schritt 1: Backup erstellen
Bevor du Theme-Einstellungen änderst, Plugins installierst oder Schriftdateien hochlädst, solltest du ein aktuelles Backup erstellen. Falls eine Einstellung nicht funktioniert oder deine Website anschließend anders aussieht als erwartet, kannst du damit den vorherigen Zustand wiederherstellen.
Wie oft du eine Sicherung brauchst und welche Möglichkeiten es dafür gibt, erkläre ich in Wie oft sollte man ein WordPress Backup machen?
Schritt 2: Prüfen, ob deine Website Google Fonts extern lädt
Bevor du etwas änderst, solltest du zuerst überprüfen, ob überhaupt Handlungsbedarf besteht. Typische Domains für extern geladene Google Fonts sind:
fonts.googleapis.comfonts.gstatic.com
Tauchen diese Domains beim Laden deiner Website auf, werden zumindest bestimmte Google-Fonts-Ressourcen extern geladen.
Methode 1: Browser-Entwicklertools nutzen
Am zuverlässigsten funktioniert die Prüfung über den Netzwerk-Tab deines Browsers.
- Öffne deine Website in Chrome, Firefox oder Edge. Nutze am besten ein privates beziehungsweise Inkognito-Fenster.
- Öffne die Entwicklertools mit F12. Auf dem Mac funktioniert je nach Browser Cmd + Option + I.
- Wechsle zum Bereich Network beziehungsweise Netzwerk.
- Lade die Seite neu.
- Filtere beispielsweise nach
fonts.g.
Siehst du dort Anfragen an fonts.googleapis.com oder fonts.gstatic.com, werden Google-Fonts-Ressourcen extern geladen.
Im Netzwerk-Tab erkennst du, ob Schriftdateien von Google-Servern geladen werden.
Methode 2: Im Seitenquelltext suchen
Eine zusätzliche Prüfung ist über den Seitenquelltext möglich. Öffne ihn beispielsweise mit Strg + U und suche anschließend mit Strg + F nach fonts.googleapis.
Findest du dort einen entsprechenden Stylesheet-Link, ist eine externe Google-Fonts-Einbindung vorhanden. So sieht ein solcher Treffer im Quelltext typischerweise aus:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700">
<link rel="stylesheet" href="https://meine-website.de/wp-content/themes/mein-theme/style.css">Wichtig: Diese Methode findet nicht zwangsläufig jede dynamisch oder nachträglich erzeugte Anfrage. Der Netzwerk-Tab ist deshalb für die abschließende Kontrolle aussagekräftiger.
Prüfe mehrere Seitentypen
Kontrolliere nicht nur deine Startseite. Schau dir zusätzlich beispielsweise an:
- eine normale Unterseite,
- einen Blogbeitrag,
- deine Kontaktseite,
- Landingpages mit Page Buildern.
Plugins oder einzelne Module können externe Fonts nämlich nur auf bestimmten Seiten laden.
Schritt 3: Google Fonts lokal einbinden
Welcher Weg der richtige ist, hängt davon ab, welches Theme oder welcher Page Builder auf deiner WordPress-Website läuft.
Block-Themes: WordPress Font Library verwenden
Seit WordPress 6.5 gibt es eine integrierte Font Library. Mit ihr kannst du Schriftarten direkt über den WordPress-Editor verwalten. Bei kompatiblen Block-Themes findest du die Schriftverwaltung im Website-Editor im Bereich der Stile beziehungsweise Typografie.
Wählst du dort eine Schrift aus der Google-Fonts-Sammlung zur Installation aus, lädt WordPress die benötigten Dateien auf deine eigene Website. Die Font Library speichert die Dateien standardmäßig im Verzeichnis /wp-content/uploads/fonts/.
So müssen die Dateien nicht bei jedem Seitenaufruf erneut von den Google-Fonts-Servern abgerufen werden. Mehr zum Arbeiten mit Block-Themes findest du in Full Site Editing WordPress: So vermeidest du typische Design-Fehler.
So funktioniert die WordPress Font Library: Schrift auswählen und lokal installieren.
Google Fonts mit Astra lokal einbinden
Auch Astra besitzt eine eigene Funktion, mit der du Google Fonts lokal einbinden kannst. Öffne in WordPress die Astra-Einstellungen und suche nach der Option Load Google Fonts Locally.
Ist diese aktiviert, kann Astra die verwendeten Google Fonts lokal auf deiner Website speichern und ausliefern. Nach der Aktivierung solltest du trotzdem den Cache leeren und mit dem Netzwerk-Tab überprüfen, ob noch externe Anfragen vorhanden sind. Andere Plugins können unabhängig vom Theme eigene Google Fonts laden.
Google Fonts mit Elementor lokal einbinden
Bei Elementor musst du zwischen zwei unterschiedlichen Möglichkeiten unterscheiden. Du kannst:
- Google Fonts weiterhin verwenden, sie aber lokal auf deiner Website speichern.
- Google Fonts in Elementor vollständig deaktivieren.
Wenn du die bekannten Google-Fonts-Schriften weiterhin nutzen möchtest, aber Google Fonts lokal einbinden willst, verwendest du die Local-Fonts-Funktion von Elementor. Gehe dazu zu Elementor → Editor → Settings → Performance. Dort findest du die Einstellung Load Google Fonts Locally.
Aktivierst du diese Option, lädt Elementor die verwendeten Google Fonts auf deinen eigenen Server und passt die entsprechenden CSS-Dateien an. Die Font-Dateien werden von Elementor unter anderem im Verzeichnis /wp-content/uploads/elementor/fonts/ gespeichert.
Wichtig: Seit Elementor 3.32.1 ist diese Funktion standardmäßig deaktiviert. Nach größeren Elementor-Updates lohnt sich deshalb ein kurzer Blick in die Einstellung.
Alternative: Google Fonts in Elementor vollständig deaktivieren. Wenn du überhaupt keine von Elementor bereitgestellten Google Fonts verwenden möchtest, kannst du sie stattdessen vollständig deaktivieren. Gehe dazu zu Elementor → Editor → Settings → Advanced. Dort kannst du die Verwendung von Google Fonts durch Elementor deaktivieren. Diese Einstellung ist keine zusätzliche Maßnahme nach dem lokalen Laden, sondern eine Alternative.
Kurz gesagt:
- Möchtest du Google Fonts weiterhin verwenden und lokal einbinden, aktiviere Load Google Fonts Locally.
- Möchtest du ausschließlich eigene, vom Theme bereitgestellte oder selbst hochgeladene Schriften verwenden, deaktiviere Google Fonts in Elementor vollständig.
So vermeidest du, dass beide Vorgehensweisen miteinander vermischt werden.
Google Fonts mit Divi lokal einbinden
Bei Divi kannst du eigene Schriftdateien über die Custom-Font-Funktion hochladen. Öffne dazu die Einstellungen eines textbasierten Moduls und gehe zu Design → Text → Text Font. In der Schrift-Auswahl findest du die Möglichkeit, eine eigene Schrift hochzuladen. Elegant Themes dokumentiert hierfür die Formate .ttf und .otf.
Nach dem Upload steht die Schrift in Divi zur Verfügung und kann auch als globale Schrift verwendet werden.
Zusätzlich solltest du verhindern, dass Divi weiterhin Google Fonts extern lädt. Gehe dazu zu Divi → Theme-Optionen → Allgemein und stelle die Einstellung „Google Fonts verwenden“ auf „Aus“. Speichere die Änderungen und wähle anschließend deine hochgeladene Schrift als globale Schrift aus.
Mit dem Schalter „Google Fonts verwenden“ stoppst du das externe Laden in Divi.
Prüfe danach, ob deine Website trotzdem noch zusätzliche Google Fonts extern nachlädt.
Google Fonts mit einem Plugin lokal speichern
Wenn dein Theme oder Page Builder keine passende Funktion anbietet, kannst du alternativ ein Plugin verwenden. Eine bekannte Lösung ist OMGF – Optimize My Google Fonts aus dem offiziellen WordPress-Plugin-Verzeichnis.
Das Plugin kann Google-Fonts-Einbindungen erkennen, entsprechende Schriftdateien lokal speichern und externe Font-Ressourcen durch lokale Versionen ersetzen. Die Einstellungen findest du unter Einstellungen → Optimize Google Fonts.
Auch hier gilt: Verlasse dich nicht ausschließlich auf die Plugin-Einstellung. Du solltest anschließend immer kontrollieren, ob deine Website tatsächlich keine unerwünschten Font-Anfragen mehr an Google sendet.
Google Fonts manuell per CSS einbinden
Wenn du mit einem Child-Theme arbeitest und möglichst viel Kontrolle möchtest, kannst du Google Fonts lokal einbinden, indem du die Dateien selbst hochlädst und per CSS registrierst.
1. Schriftdateien herunterladen
Ein praktisches Werkzeug dafür ist der Google Webfonts Helper. Wähle dort:
- die gewünschte Schriftfamilie,
- die benötigten Zeichensätze,
- nur die Schriftstärken, die du tatsächlich verwendest.
Für eine einfache Website reichen beispielsweise oft Regular 400 und Bold 700. Für moderne Websites ist WOFF2 in der Regel das sinnvollste Format.
Wähle nur die Zeichensätze und Schriftschnitte aus, die du tatsächlich brauchst.
2. Schriftdateien hochladen
Lege innerhalb deines Child-Themes einen Ordner fonts an, zum Beispiel /wp-content/themes/mein-child-theme/fonts/. „mein-child-theme“ steht dabei für den Ordnernamen deines eigenen Child-Themes. Lade dort die benötigten WOFF2-Dateien hoch.
Die WOFF2-Dateien liegen im Ordner „fonts“ deines Child-Themes.
3. Schrift per CSS registrieren
In deiner style.css kannst du die Schrift anschließend so einbinden:
/* Regular (400) */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/inter-latin-400.woff2') format('woff2');
}
/* Bold (700) */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/inter-latin-700.woff2') format('woff2');
}
/* Schrift der Website zuweisen */
body {
font-family: 'Inter', sans-serif;
}Im Beispiel sind die Schriftschnitte Regular (400) und Bold (700) registriert. Für jeden weiteren Schnitt ergänzt du einen eigenen @font-face-Block. Der Pfad in url() bezieht sich auf den Speicherort deiner style.css. Liegt der Ordner fonts direkt daneben, passt der Pfad so.
font-display: swap sorgt dafür, dass der Browser zunächst eine Ersatzschrift anzeigt, während die eigentliche Webfont geladen wird.
Schritt 4: Externe Verbindung zu Google überprüfen
Nachdem du Google Fonts lokal eingebunden hast, solltest du unbedingt kontrollieren, was deine Website tatsächlich lädt. Nur weil eine Schrift lokal vorhanden ist, bedeutet das noch nicht automatisch, dass deine Website keine weiteren Google-Fonts-Anfragen erzeugt. Ein Theme könnte die Schrift lokal laden, während ein Plugin zusätzlich ein externes Stylesheet von Google einbindet.
Deshalb solltest du nach der Umstellung prüfen:
- Lädt das Theme noch Google Fonts?
- Lädt der Page Builder eigene Fonts?
- Gibt es Plugins mit eigenen Typografie-Einstellungen?
- Sind alte CSS-Dateien im Cache?
- Verwendet ein einzelnes Widget externe Schriften?
Bei Elementor gilt dabei besonders: Entscheide dich entweder für das lokale Laden der Google Fonts oder für das vollständige Deaktivieren der Elementor-Google-Fonts, abhängig davon, wie du deine Schriftarten verwalten möchtest.
Schritt 5: Cache leeren und Ergebnis kontrollieren
Jetzt folgt die wichtigste Kontrolle. Leere zunächst:
- den Cache deines WordPress-Caching-Plugins,
- gegebenenfalls den Server-Cache deines Hosters,
- bei Verwendung eines CDN dessen Cache,
- anschließend bei Bedarf den Browser-Cache.
Öffne deine Website danach erneut in einem privaten Browserfenster. Gehe wieder in Entwicklertools → Network und filtere nach fonts.g. Im Idealfall erscheinen jetzt keine Font-Anfragen mehr an fonts.googleapis.com oder fonts.gstatic.com.
Filterst du anschließend nach woff2, solltest du stattdessen die lokal geladenen Schriftdateien deiner eigenen Domain sehen. Prüfe wieder mehrere Seitentypen und nicht nur die Startseite.
Nach der Umstellung kommen die Schriftdateien von deiner eigenen Domain.
Sonderfälle: Google Maps, YouTube und reCAPTCHA
Trotz lokal eingebundener Website-Schriften können auf einer Website weiterhin Verbindungen zu Google auftauchen. Der Grund können eingebettete Google-Dienste sein, zum Beispiel:
- Google Maps,
- YouTube,
- reCAPTCHA,
- andere Google-Komponenten.
Diese Anfragen solltest du getrennt von deiner eigentlichen Google-Fonts-Einbindung betrachten. Wenn ein externer Dienst erst nach Einwilligung geladen werden soll, lässt sich das beispielsweise über eine geeignete Consent-Lösung oder eine Zwei-Klick-Lösung umsetzen. Welche rechtliche Lösung für deine konkrete Website notwendig ist, hängt allerdings von den eingesetzten Diensten und deinem Setup ab.
Fazit: Google Fonts lokal einbinden und anschließend kontrollieren
Google Fonts lokal einbinden ist bei vielen WordPress-Websites ohne großen Aufwand möglich. Entscheidend ist aber nicht nur, die Schriftdateien auf den eigenen Server zu bekommen, sondern anschließend auch zu überprüfen, ob tatsächlich keine unerwünschten externen Font-Anfragen mehr bestehen.
Der sinnvolle Ablauf lautet: prüfen → Google Fonts lokal einbinden → Cache leeren → erneut prüfen.
Nutze dabei möglichst die integrierte Lösung deines Themes oder Page Builders. Bei Block-Themes bietet WordPress selbst eine Font Library, Astra und Elementor besitzen eigene Funktionen und bei anderen Setups kann ein Plugin oder die manuelle CSS-Variante sinnvoll sein.
Beim Thema Geschwindigkeit solltest du keine pauschalen Verbesserungen erwarten. Lokale Fonts können externe Verbindungen reduzieren. Die tatsächliche Performance hängt aber weiterhin von Hosting, Caching, Dateigröße, CDN und vielen weiteren Faktoren ab.
Prüfe deine Website außerdem nach größeren Theme-, Page-Builder- oder Plugin-Updates erneut. Einstellungen können sich ändern und neue Komponenten können zusätzliche Font-Anfragen mitbringen.
Du möchtest dich darum nicht selbst kümmern oder willst überprüfen lassen, ob deine WordPress-Website noch externe Fonts lädt? Im Rahmen meiner WordPress-Wartung kann ich die technische Umsetzung und Kontrolle übernehmen.
Häufige Fragen zu Google Fonts lokal einbinden
Darf ich Google Fonts auf meinem eigenen Server speichern?
Grundsätzlich ja. Die über Google Fonts angebotenen Schriftarten werden unter Open-Source-Lizenzen bereitgestellt. Welche konkrete Lizenz gilt, kannst du bei der jeweiligen Schrift überprüfen.
Sind lokal eingebundene Google Fonts DSGVO-konform?
Wenn du Google Fonts lokal einbindest, werden die Schriftdateien von deinem eigenen Server geladen. Dadurch entfällt die für dynamisch eingebundene Google Fonts typische Verbindung des Browsers zu den Google-Fonts-Servern. Ob deine Website insgesamt alle datenschutzrechtlichen Anforderungen erfüllt, lässt sich daraus allerdings nicht automatisch ableiten. Andere Dienste und Verbindungen müssen separat betrachtet werden.
Muss ich lokal eingebundene Google Fonts in der Datenschutzerklärung erwähnen?
Wenn die Schriftdateien ausschließlich über deinen eigenen Server ausgeliefert werden, entsteht für den Abruf der Fonts keine direkte Verbindung zu Google. Wie du deine konkrete technische Verarbeitung in der Datenschutzerklärung beschreiben solltest, klärst du im Zweifel mit deinem Datenschutz-Generator oder einer entsprechend qualifizierten Rechtsberatung.
Reicht es, ein Google-Fonts-Plugin zu installieren?
Nicht unbedingt. Ein Plugin kann dir viel Arbeit abnehmen. Trotzdem solltest du nach der Einrichtung kontrollieren, ob tatsächlich keine unerwünschten Anfragen an fonts.googleapis.com oder fonts.gstatic.com mehr stattfinden. Die Browser-Entwicklertools sind dafür besonders hilfreich.
Wird meine Website schneller, wenn ich Google Fonts lokal einbinde?
Nicht automatisch. Wenn du Google Fonts lokal einbindest, entfallen bestimmte externe Font-Anfragen. Ob das messbar schneller ist, hängt aber unter anderem von Hosting, Cache, CDN, Dateigröße, Preloading und Anzahl der verwendeten Schriftvarianten ab. Verwende deshalb nur die Schriftschnitte, die du tatsächlich benötigst.
Welches Dateiformat sollte ich verwenden: WOFF2 oder TTF?
Für moderne Websites ist WOFF2 normalerweise die bessere Wahl. Das Format ist speziell für Webfonts komprimiert und wird von modernen Browsern breit unterstützt. Manche Theme- oder Page-Builder-Uploader akzeptieren allerdings andere Formate. Divi dokumentiert für seinen eigenen Custom-Font-Upload beispielsweise TTF und OTF. Für eine manuelle CSS-Einbindung solltest du in der Regel WOFF2 bevorzugen.
