Google Fonts in GeneratePress lokal einbinden und deaktivieren

Wenn Du Google Fonts in GeneratePress nicht mehr extern laden willst, kannst Du sie deaktivieren und stattdessen lokal in WordPress einbinden. Das reduziert zusätzliche Requests zu Google und gibt Dir mehr Kontrolle über Schriftverwaltung, Ladeverhalten und Datenschutz.

Für dieses Setup gibt es im Kern zwei Wege.

• Variante A: manuell ohne Plugin. Du deaktivierst Google Fonts in GeneratePress, lädst die Font-Dateien lokal hoch und bindest sie per @font-face ein.
• Variante B: GeneratePress Premium Font Library. Wenn Dein Setup diese Funktion nutzt, kannst Du Schriften direkt innerhalb von GeneratePress lokal verwalten.

Wenn Du vor allem externe Google-Font-Aufrufe loswerden willst, ist die manuelle Variante meist der direkteste Weg.

Welche Variante passt zu Deinem Setup?

• Du nutzt GeneratePress Free oder willst maximale Kontrolle: Nimm den manuellen Weg.
• Du nutzt GeneratePress Premium und arbeitest ohnehin mit der Font Library: Prüfe die Premium-Variante weiter unten.
• Du willst eine Plugin-Lösung: Das geht ebenfalls. Der Artikel konzentriert sich aber bewusst auf den manuellen Weg und die GeneratePress Premium Font Library. Mehr dazu findest Du weiter unten im Abschnitt „Plugin oder ohne Plugin?“.

Warum das Thema auch für DSGVO-Fragen relevant ist

Werden Google Fonts extern geladen, entstehen zusätzliche Requests zu Google-Servern. Genau deshalb stellen viele Website-Betreiber auf lokal eingebundene Schriften um.

Die lokale Einbindung ist in erster Linie eine technische Maßnahme, um externe Google-Requests zu reduzieren. Sie kann aus Datenschutzsicht sinnvoll sein, ersetzt aber keine individuelle rechtliche Bewertung Deines kompletten Setups.

Wenn Du mehr mit Snippets arbeitest: In meinem Artikel 25 Snippets für WordPress findest Du weitere praktische Beispiele.

Google Fonts in GeneratePress deaktivieren

Der erste Schritt ist immer gleich: Die bisher extern geladenen Google Fonts müssen in GeneratePress deaktiviert werden. Die genaue Bezeichnung kann je nach GeneratePress-Version leicht abweichen, der Ablauf bleibt aber gleich.

1. Customizer öffnen: Gehe in WordPress auf Design → Customizer.
2. Typografie öffnen: Wechsle dort in den Bereich Typografie.
3. Aktive Schriftfamilie prüfen: Wenn im Typography Manager bereits eine Google-Schrift angelegt ist, öffne rechts die Einstellungen der Schriftfamilie.
4. Google Fonts API deaktivieren: Entferne die externe Auslieferung, damit die Schrift im Frontend nicht mehr über Google geladen wird.

Die folgenden Screenshots zeigen die Schritte im Customizer noch einmal visuell: Customizer öffnen, Typografie aufrufen, Schriftfamilie prüfen und Google Fonts API deaktivieren.

Danach fällt Dein Frontend meist zunächst auf die Systemschrift zurück. Das ist normal, solange die lokale Einbindung noch nicht eingerichtet ist.

Fonts lokal in WordPress einbinden

Jetzt brauchst Du die gewünschte Schriftdatei lokal auf Deinem Server. Dafür wird hier der Google Webfonts Helper genutzt.

1. Schrift auswählen: Suche im Google Webfonts Helper nach der gewünschten Schrift.
2. Varianten festlegen: Wähle nur die Schnitte und Zeichensätze, die Du wirklich brauchst.
3. Dateien herunterladen: Lade die Dateien herunter und entpacke das ZIP-Archiv.

Wenn Du mit FTP oder Dateimanager arbeitest, kannst Du die Dateien direkt auf Deinen Server hochladen. Wenn Du lieber über die WordPress-Mediathek gehst, musst Du den Upload für Font-Dateien meist kurzzeitig erlauben. Dazu kannst Du folgendes Snippet per Code-Snippet verwenden:

add_filter( 'upload_mimes', function( $mimes ) {
    $mimes['woff']  = 'application/x-font-woff';
    $mimes['woff2'] = 'font/woff2';

    return $mimes;
} );

Wichtig: Solche Upload-Freigaben nur so lange aktiv lassen, wie Du sie wirklich brauchst. Für viele moderne Setups reichen woff2 und woff. Wenn Du wirklich eine ttf-Datei brauchst, kannst Du das später gezielt ergänzen.

Danach kannst Du die Font-Datei hochladen und ihre URL aus den Anhang-Details übernehmen.

Wenn Du für Dein konkretes Setup doch eine ttf-Datei hochladen musst, kannst Du diesen MIME-Type zusätzlich gezielt freischalten. Für normale Webfont-Nutzung würde ich zuerst mit woff2 arbeiten.

Beispiel: So kann eine Upload-URL in einer lokalen Testumgebung aussehen:

http://localhost/test/wp-content/uploads/2024/05/zeyada-v19-latin-regular.woff2

Für Dein eigenes Setup musst Du natürlich Deine echte Upload-URL verwenden, nicht die Beispieladresse aus localhost.

CSS mit @font-face einfügen

Wenn die Dateien lokal liegen, bindest Du sie per CSS ein. Du kannst dafür entweder das vom Webfonts Helper erzeugte CSS übernehmen oder Dir die relevanten Zeilen selbst zusammenbauen.

Ein einfaches Beispiel sieht so aus:

@font-face {
    font-family: 'Zeyada';
    src: url('https://deine-domain.de/wp-content/uploads/2024/05/zeyada-v19-latin-regular.woff2') format('woff2');
    font-display: swap;
}

body {
    font-family: 'Zeyada', cursive;
}

Dieses CSS kannst Du unter Design → Customizer → Zusätzliches CSS einfügen oder – wenn Du sauber mit Dateien arbeitest – in einem Child Theme hinterlegen. Wenn Du dazu noch keines nutzt, findest Du hier eine passende Einführung: Child Themes in WordPress nutzen.

Wichtig: Passe Schriftname, Dateiname und URL exakt an Deine tatsächliche Font-Datei an.

Auch GeneratePress selbst dokumentiert den manuellen Weg mit lokalen Fonts und @font-face.

Optionale Performance-Optimierung: wichtigste Schrift preloaden

Wenn eine lokale Schrift für den sichtbaren Seitenbereich wichtig ist, kannst Du genau diese eine woff2-Datei testweise preloaden. Prüfe danach im Frontend, ob sich das Ladeverhalten wirklich verbessert.

add_action( 'wp_head', function() {
    echo '<link rel="preload" href="' . esc_url( content_url( '/uploads/2024/05/zeyada-v19-latin-regular.woff2' ) ) . '" as="font" type="font/woff2" crossorigin>';
} );

Wichtig: Ersetze den Pfad in content_url() durch den tatsächlichen Upload-Pfad Deiner wichtigsten woff2-Datei, zum Beispiel /uploads/jahr/monat/deine-schrift.woff2.

Das ist optional und sollte nur für die wirklich wichtigste Font-Datei genutzt werden, nicht pauschal für mehrere Varianten. Wenn Du bereits Performance-Plugins nutzt, prüfe zusätzlich, ob diese das Preloading nicht schon übernehmen.

Prüfen, ob die Schrift wirklich lokal geladen wird

Bevor Du das Thema als erledigt abhaken kannst, solltest Du prüfen, ob im Frontend noch externe Google-Font-Requests auftauchen.

• Frontend öffnen: Rufe eine Seite auf, auf der die Schrift sichtbar sein sollte.
• Browser-Entwicklertools öffnen: Wechsle in den Netzwerk-Tab.
• Nach externen Font-Requests suchen: Achte auf Aufrufe zu fonts.googleapis.com oder fonts.gstatic.com.
• Schrift im Rendering prüfen: Kontrolliere zusätzlich im Inspektor, ob wirklich Deine lokale Schriftfamilie verwendet wird.

Wenn weiterhin Requests an Google auftauchen, ist meist noch eine Schrift im Theme, in einem Plugin oder in einer CSS-Datei aktiv, die nicht umgestellt wurde.

Lokale Fonts auch im Block-Editor anzeigen

Lokale Fonts sollen idealerweise nicht nur im Frontend, sondern auch im Block-Editor sichtbar sein. Je nach Setup kannst Du das unterschiedlich lösen.

Wenn Dein @font-face-CSS im Customizer unter Zusätzliches CSS liegt, kannst Du dieses Snippet nutzen:

add_filter( 'block_editor_settings_all', function( $editor_settings ) {
    $css = wp_get_custom_css_post()->post_content;
    $editor_settings['styles'][] = array( 'css' => $css );

    return $editor_settings;
} );

Wenn Du Deine Font-CSS stattdessen in einer Theme-Datei oder im Child Theme verwaltest, kannst Du in GeneratePress diesen Weg nutzen:

add_filter( 'generate_editor_styles', function( $editor_styles ) {
    $editor_styles[] = 'style.css';

    return $editor_styles;
} );

Was ist mit der WordPress Font Library?

Seit WordPress 6.5 gibt es zusätzlich eine Font Library direkt im Editor. Darüber kannst Du Schriften in WordPress verwalten, ohne den kompletten Weg nur über Theme-Dateien abzubilden. WordPress Core hat die Funktion bei ihrer Einführung selbst beschrieben.

Für diesen Artikel bleibt GeneratePress trotzdem der wichtigste Bezugspunkt, weil die Schrift am Ende im Theme bzw. in der Typografie auch wirklich verwendet werden muss. Wenn Dein Setup bereits sauber mit der WordPress Font Library arbeitet, kann das eine Alternative sein. Nutzt Du GeneratePress Free oder willst volle Kontrolle über die Einbindung, bleibt der manuelle Weg mit @font-face die nachvollziehbarste Lösung.

GeneratePress Premium: Font Library als Alternative

Wenn Du mit GeneratePress Premium arbeitest, ist die Font Library in vielen Fällen der schnellere Weg. Je nach Version können die Menüpunkte leicht anders heißen. Entscheidend ist: Die Schrift muss lokal installiert sein und darf im Frontend nicht mehr über die Google Fonts API geladen werden. GeneratePress beschreibt diese lokale Font Library ebenfalls in der eigenen Dokumentation.

1. Font Library aktivieren: Öffne in GeneratePress die entsprechenden Modul- oder Font-Einstellungen.
2. Font Library öffnen: Gehe in die Font Library und öffne die Installations- bzw. Verwaltungsansicht.
3. Schrift installieren oder hochladen: Je nach Setup kannst Du Google Fonts importieren oder bereits lokal vorhandene Dateien verwenden.
4. Font konfigurieren: Weise Varianten und Anzeigeoptionen zu.
5. In der Typografie zuordnen: Aktiviere die Schrift anschließend für die gewünschten Bereiche Deiner Website.

Die folgenden Screenshots zeigen die Schritte noch einmal visuell:

Die Premium-Variante ist vor allem dann sinnvoll, wenn Du Deine Typografie bereits über GeneratePress verwaltest. Für Premium-Nutzer ist sie häufig der schnellere Weg. Wenn Du GeneratePress Free nutzt oder die Einbindung möglichst transparent selbst kontrollieren willst, bleibt die manuelle Methode die bessere Anleitung.

Plugin oder ohne Plugin?

Natürlich kannst Du Fonts auch über ein Plugin lokal einbinden. Der Artikel konzentriert sich trotzdem bewusst auf den manuellen Weg, weil Du damit Theme-Einstellungen, Dateien und CSS selbst nachvollziehen kannst.

• Vorteil ohne Plugin: Du kontrollierst Dateien, CSS und Einbindung selbst.
• Vorteil mit Plugin: Weniger Handarbeit.
• Nachteil mit Plugin: Du gibst einen Teil der Logik an ein zusätzliches Werkzeug ab und musst dessen Verhalten mit Deinem Theme-Setup abgleichen.

Wenn Du ohnehin möglichst wenig zusätzliche Plugins einsetzen willst, passt der manuelle Weg oft besser. Mehr dazu findest Du auch in meinem Artikel über zu viele WordPress-Plugins.

Wenn es nicht klappt

• Die Schrift ändert sich nicht: Prüfe, ob Deine CSS-Regel wirklich auf die richtigen Selektoren zeigt.
• Es gibt weiter Requests an Google: Suche zusätzlich in Plugins, Theme-Optionen und eigenem CSS nach aktiven Google-Font-Einbindungen.
• Die Font-Datei lädt nicht: Prüfe Dateiname, Pfad und Dateirechte.
• Die Schrift erscheint im Frontend, aber nicht im Editor: Nutze die Editor-Snippets aus dem Abschnitt oben.

FAQ

Weiterführende Quellen

• WordPress Core: Font Library
• Google Fonts: Privacy and Data Collection
• GeneratePress: Local Font Library
• GeneratePress Docs: Adding Local Fonts
• LG München I: Urteil zu Google Fonts

Fazit

Wenn Du Google Fonts in GeneratePress entfernen und lokal in WordPress einbinden willst, ist der manuelle Weg meist die klarste Lösung: externe Einbindung deaktivieren, Font-Dateien lokal hochladen, CSS sauber setzen und anschließend im Frontend prüfen. Mit GeneratePress Premium kann die Font Library eine bequeme Alternative sein, aber für viele Setups reicht die manuelle Methode völlig aus.

Aus technischer Sicht reduzierst Du damit externe Requests zu Google. Ob und wie Dein gesamtes Setup datenschutzrechtlich zu bewerten ist, hängt trotzdem vom konkreten Einzelfall ab. Wenn Du Dich tiefer in das Thema einlesen willst, findest Du hier auch meinen Leitfaden zu WordPress, DSGVO und Cookie-Management.