Google Fonts lokal einbinden – in WordPress
Zusammenfassung
- DSGVO-Risiken vermeiden: Durch das lokale Einbinden von Google Fonts werden keine Nutzerdaten mehr an Google-Server übertragen – Abmahnungen und rechtliche Unsicherheiten lassen sich so deutlich reduzieren.
- Website schneller laden: Lokal gespeicherte Schriftarten sparen externe Requests und verbessern die Ladezeit sowie die technische Performance deiner Website.
- Volle Kontrolle über Schriften: Du bestimmst selbst, welche Fonts geladen werden, und machst dich unabhängig von externen Diensten oder Änderungen seitens Google.
Update, Jan. 2025: Mit Version 3.27 bietet Elementor unter „Einstellungen > Leistung“ die Funktion, dass Google Fonts lokal geladen werden können. Wenn aktiviert, dann werden alle Elementor-Seiten geprüft und alle Fonts heruntergeladen. Diese stehen dann lokal zur Verfügung – ohne, dass Daten zu Google geschickt werden. Endliche die Funktion, die ich schon länger erwartet habe.
Update, Jan. 2023: Seit Elementor-Version 3.10 gibt es unter „Einstellungen > Erweitert“ die Funktion, dass Google Fonts aktiviert / deaktiviert werden können. Damit werden keine Fonts eines Plugins oder Themes geladen. Dann ist man DSGVO-mäßig auf der sicheren Seite, aber muss entweder auf die Google Fonts komplett verzichten oder sie lokal als Custom Font verwenden. Wie du letzteres umsetzt, erfährst du hier in diesem Blog-Beitrag.
Wenn du Google Fonts auf deiner Website verwenden möchtest, dann binde sie unbedingt lokal ein. So erhöhst du die Performance und vermeidest Ärger mit dem Gesetz.
Habe ich bereits Google Fonts auf meiner Website? Und wenn ja, wie identifiziere ich sie?
Wo kann ich meine gewünschte Schriftart herunterladen?
- Suche im linken Teil der Website die gewünschte Schriftart.
- Bei „Select Charset“ (Zeichenkodierung) musst du sehr wahrscheinlich nichts einstellen – außer deine Website verwendet keine lateinischen Buchstaben.
- Bei „Select Styles“ legst du die Schriftstärken auf deiner Website fest. Am besten nimmst du hier die 400 für die normale Schrift und 700 für fette Schrift.
- Gib bei „Copy CSS“ unter dem Quellcode im Feld „Customize folder prefix“ den Pfad an, wo du später die Schriften auf deinem Server ablegst. Jetzt erst den CSS-Code kopieren und in einer Text-Datei abspeichern.
- Die Schrift bei „Download files“ herunterladen.
Wie lege ich die Google Fonts auf dem Server ab?
Wo binde ich den CSS-Code auf meiner Website ein?
/*
Theme Name: Hello Elementor
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Description: A plain-vanilla & lightweight theme for Elementor page builder
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Version: 2.5.0
Stable tag: 2.5.0
Requires at least: 4.7
Tested up to: 5.9
Requires PHP: 5.6
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: hello-elementor
Tags: flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready
*/
/* saira-extra-condensed-regular - latin */
@font-face {
font-family: 'Saira Extra Condensed';
font-style: normal;
font-weight: 400;
src: url('../fonts/saira-extra-condensed-v11-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/saira-extra-condensed-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/saira-extra-condensed-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/saira-extra-condensed-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/saira-extra-condensed-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/saira-extra-condensed-v11-latin-regular.svg#SairaExtraCondensed') format('svg'); /* Legacy iOS */
}
/* saira-extra-condensed-700 - latin */
@font-face {
font-family: 'Saira Extra Condensed';
font-style: normal;
font-weight: 700;
src: url('../fonts/saira-extra-condensed-v11-latin-700.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/saira-extra-condensed-v11-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/saira-extra-condensed-v11-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/saira-extra-condensed-v11-latin-700.woff') format('woff'), /* Modern Browsers */
url('../fonts/saira-extra-condensed-v11-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/saira-extra-condensed-v11-latin-700.svg#SairaExtraCondensed') format('svg'); /* Legacy iOS */
}
Glückwünsch, du hast nun die Schriften lokal bei dir eingebunden.
Wie werde ich meine extern eingebundenen Google Fonts endgültig los?
Wie unterbinde ich die Google Fonts mit Autoptimize?
Wie überprüfe ich meine Änderungen?
Inhalt
Ich bin Eric,
Experte für Performance-Marketing, Spezialist für Websites und Social Media, Eisbader und Hindernisrennen-Läufer.
Wenn du Unterstützung bei deiner Website benötigst, dann lass es mich wissen. Gerne spreche ich mit dir über deine Ziele und Herausforderungen – ganz unverbindlich. Gemeinsam finden wir eine passende Strategie.
8 Elemente, die auf keiner Startseite fehlen dürfen – Blueprint für deine Struktur und Inhalte
- Am Ende weißt du, wie eine Startseite aufgebaut ist.
- Du bekommst Inspirationen für mögliche Inhalte.
- Deine Besucher verweilen idealerweise länger auf deiner Website.
- Deine Besucher finden ganz einfach, was sie suchen und können schneller eine fundierte Kaufentscheidung treffen.
- Du weißt, wie du ChatGPT für Text-Vorschläge nutzt.
FAQ: Häufige Fragen zu Google Fonts
Sind Google Fonts (extern geladen) ein DSGVO-Problem?
Wenn Google Fonts extern von Google-Servern geladen werden, wird dabei in der Regel die IP-Adresse des Besuchers an Google übertragen. Genau das wurde 2022 vom Landgericht München I als datenschutzwidrig bewertet, wenn keine Einwilligung vorliegt. Deshalb gilt: Externe Google Fonts sind aus DSGVO-Sicht problematisch.
Warum sollte ich Google Fonts lokal einbinden?
Wenn du Google Fonts lokal einbindest, vermeidest du externe Verbindungen zu Google. Das ist aus Datenschutzsicht deutlich sauberer und reduziert gleichzeitig externe Requests, was sich positiv auf die Ladezeit auswirken kann. Kurz gesagt: mehr Kontrolle, weniger Risiko.
Wie finde ich heraus, ob meine Website Google Fonts von Google lädt?
Öffne deine Website im Browser, z. B. Chrome, rufe die Entwickler-Tools auf (F12) und wechsle in den Netzwerk-Tab. Wenn dort Requests zu fonts.googleapis.com oder fonts.gstatic.com auftauchen, werden Google Fonts extern geladen. Das ist der zuverlässigste Weg, um es zu prüfen.
Wie binde ich Google Fonts lokal in WordPress ein?
Kurzfassung:
- Schriftarten herunterladen: Google Webfonts Helper
- Dateien auf den eigenen Server hochladen
- per @font-face im CSS einbinden
- anschließend prüfen, dass keine Google-Font-Domains mehr geladen werden
Alternativ kannst du auch ein Plugin (z. B. Autooptimize, Elementor, OMGF) nutzen, das diesen Prozess automatisiert. Wichtig ist am Ende nicht der Weg, sondern das Ergebnis: keine externe Verbindung zu Google Fonts.
Kann ich Google Fonts in Elementor lokal laden?
Die Einstellung „Google Fonts lokal laden“ in Elementor betrifft nur Google Fonts, die über Elementor selbst verwendet werden. Elementor scannt seine eigenen Seiten, lädt die dort genutzten Fonts lokal und passt die von Elementor erzeugten CSS-Dateien entsprechend an.
Fonts aus dem Theme oder aus anderen Plugins werden davon nicht automatisch erfasst und müssen separat geprüft werden.