Google Fonts lokal in Elementor einbinden: Der ultimative Guide

Google Fonts sind eine beliebte Wahl für Webdesigner und Entwickler, die moderne und ansprechende Schriftarten in ihre Websites integrieren möchten. Doch aufgrund der Datenschutz-Grundverordnung (DSGVO) stellt sich die Frage: Wie kann man Google Fonts sicher in Elementor verwenden, ohne Daten an Google-Server zu senden?

Die Antwort: Google Fonts lokal einbinden. In diesem ausführlichen Leitfaden zeigen wir dir, warum das wichtig ist und wie du es Schritt für Schritt umsetzen kannst.

Warum Google Fonts lokal einbinden?

1. DSGVO-Konformität

Wenn deine Website Google Fonts direkt von den Google-Servern lädt, wird die IP-Adresse deiner Besucher an Google übermittelt. Dies kann ein Datenschutzrisiko darstellen und sogar zu Abmahnungen führen. Indem du die Schriftarten lokal hostest, eliminierst du dieses Problem und machst deine Website DSGVO-konform.

2. Verbesserte Ladezeiten

Durch das lokale Hosting der Google Fonts kannst du die Ladegeschwindigkeit deiner Website optimieren, da keine zusätzlichen HTTP-Requests an externe Server erforderlich sind. Schnelle Ladezeiten verbessern nicht nur die Benutzererfahrung, sondern haben auch einen positiven Einfluss auf dein Google-Ranking.

3. Mehr Kontrolle über deine Schriftarten

Indem du die Schriftarten direkt auf deinem Server speicherst, kannst du sicherstellen, dass sie jederzeit verfügbar sind und nicht durch externe Server-Ausfälle oder Updates verändert werden.

Schritt-für-Schritt-Anleitung: Google Fonts lokal in Elementor einbinden

Schritt 1: Google Fonts herunterladen

Zunächst musst du die gewünschten Google Fonts herunterladen. Dazu kannst du eine Website wie Google Webfonts Helper nutzen:

1. Besuche Google Webfonts Helper.
2. Wähle die Schriftart aus, die du lokal einbinden möchtest.
3. Wähle die benötigten Schriftschnitte (z. B. normal, fett, kursiv).
4. Lade das Paket herunter – es enthält WOFF- und WOFF2-Dateien, die für Webanwendungen optimiert sind.

Schritt 2: Schriftarten auf deinen Server hochladen

1. Verbinde dich per FTP (z. B. mit FileZilla) oder über den Dateimanager deines Hosting-Providers mit deinem Server.
2. Navigiere zu wp-content/uploads/ und erstelle einen neuen Ordner namens fonts.
3. Lade die heruntergeladenen Schriftart-Dateien (.woff und .woff2) in diesen Ordner hoch.

Schritt 3: Schriftarten per CSS einbinden

Nun müssen die Schriftarten in das CSS deiner Website eingebunden werden. Gehe dazu wie folgt vor:

1. Öffne dein WordPress-Dashboard und navigiere zu Design > Customizer > Zusätzliches CSS.
2. Füge den folgenden CSS-Code ein, um die Schriftarten zu registrieren:

@font-face {
    font-family: 'MeineGoogleFont';
    src: url('/wp-content/uploads/fonts/meine-google-font.woff2') format('woff2'),
         url('/wp-content/uploads/fonts/meine-google-font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

3. Ersetze MeineGoogleFont mit dem tatsächlichen Namen deiner Schriftart.
4. Speichere die Änderungen.

Schritt 4: Google Fonts in Elementor deaktivieren

Da Elementor standardmäßig Schriftarten von Google lädt, müssen wir diese deaktivieren, damit keine externen Anfragen mehr stattfinden.

1. Öffne dein WordPress-Dashboard und gehe zu Elementor > Einstellungen.
2. Aktiviere die Option Google Fonts deaktivieren.
3. Speichere die Änderungen.

Alternativ kannst du folgenden Code in die functions.php deines Child-Themes einfügen:

function disable_google_fonts() {
    return '__return_false';
}
add_filter('elementor/frontend/print_google_fonts', 'disable_google_fonts');

Dadurch werden alle Google Fonts deaktiviert, die Elementor standardmäßig lädt.

Schritt 5: Schriftart in Elementor verwenden

1. Öffne den Elementor-Editor.
2. Wähle ein Text- oder Überschrift-Widget aus.
3. Gehe im Tab Stil > Typografie zur Schriftart-Auswahl.
4. Gib den Namen der lokal eingebundenen Schriftart (z. B. „MeineGoogleFont“) ein.
5. Speichere die Änderungen.

Nun verwendet Elementor die lokal gehosteten Google Fonts anstelle der extern geladenen Schriftarten.

Bonus: Google Fonts über ein Plugin lokal einbinden

Falls du die manuelle Methode vermeiden möchtest, kannst du ein Plugin wie OMGF – Host Google Fonts Locally nutzen:

1. Installiere und aktiviere das Plugin über Plugins > Installieren.
2. Gehe zu Einstellungen > Optimize Google Fonts.
3. Klicke auf „Start Optimization“ – das Plugin lädt automatisch die verwendeten Google Fonts herunter und speichert sie lokal.
4. Speichere die Einstellungen.

Das Plugin übernimmt den gesamten Prozess und macht deine Website DSGVO-konform mit wenigen Klicks.

Fazit: Warum du Google Fonts lokal mit Elementor nutzen solltest

Das lokale Einbinden von Google Fonts in Elementor ist eine der besten Möglichkeiten, deine Website datenschutzkonform und schneller zu machen. Die wichtigsten Vorteile sind:

✅ DSGVO-konform – keine Datenübertragung an Google ✅ Schnellere Ladezeiten durch weniger externe Anfragen ✅ Volle Kontrolle über deine Schriftarten ✅ Einfache Umsetzung mit oder ohne Plugin

Wenn du diese Schritte befolgst, kannst du sicherstellen, dass deine Website sowohl optisch ansprechend als auch rechtlich abgesichert ist. Viel Erfolg beim Optimieren deiner WordPress-Elementor-Website!