Wenn Sie eine Website durch PageSpeed Insights analysieren, lautet eine der häufigen Diagnosen: „Ensure text remains visible during webfont load". Das Problem kennt jeder, der Elementor, Astra oder Google Fonts eingebunden hat: Während der Browser die Schriftdatei herunterlädt, fehlt der Text auf der Seite schlichtweg. Ein weißer Bildschirm statt einer Überschrift, Sekundenbruchteile der Leere, und der Besucher ist bereits weg.

Technisch heißt das FOIT (Flash of Invisible Text). Die Ursache liegt in der font-display-Direktive, die der Browser standardmäßig verwendet. Ohne explizite Angabe von font-display: swap wartet der Browser auf den Schriftladevorgang und zeigt keinen Text an, bevor die Datei empfangen wurde. Und wenn die Schrift von einem CDN über eine Drittanbieter-Domain geladen wird, summiert sich die Verzögerung, und PageSpeed Insights meldet eine Warnung.

Das lässt sich mit zwei Maßnahmen beheben: Erstens benötigt jede @font-face-Regel den Zusatz font-display: swap, damit der Browser sofort Text in einer Systemschrift anzeigt und diese gegen die gewünschte Schrift „austauscht", sobald sie geladen ist. Zweitens sollten besonders wichtige Schriften (etwa die für die Überschrift im sichtbaren Bereich) per <link rel="preload"> vorgeladen werden. Nachfolgend eine Schritt-für-Schritt-Anleitung, wie Sie das in WordPress umsetzen, unter Berücksichtigung von Plugins wie Elementor und Themes wie Astra.

💡 Kurzüberblick:

• Öffnen Sie den PageSpeed-Insights-Bericht und notieren Sie die problematischen Schriften aus der Diagnose
• Deaktivieren Sie Plugin- und Theme-Styles per wp_dequeue_style in der functions.php
• Kopieren Sie die Schriftdateien in ein lokales Verzeichnis und erstellen Sie font-face mit font-display: swap neu
• Fügen Sie Preload für ein bis zwei Schriften des sichtbaren Bereichs hinzu
• Bei benutzerdefinierten Elementor-Schriften ändern Sie den Pfad auf lokal und bauen das CSS neu auf

Schritt 1: Problematische Schriften im Bericht finden

Führen Sie einen Audit auf PageSpeed Insights durch, warten Sie das Ergebnis ab und suchen Sie den Diagnosebereich. Wir suchen den Eintrag „Ensure text remains visible during webfont load".

Klappen Sie die Liste auf, um die konkreten Schrift-URLs zu sehen, denen font-display: swap fehlt. In der Regel sind das:

• fontawesome-webfont.woff2, Font Awesome von Elementor;
• eicons.woff2, Elementors Icon-Schrift;
• Google Fonts (Open Sans, Roboto, Montserrat), sofern das Theme sie per CDN einbindet.

Notieren Sie die Dateinamen; sie werden für die folgenden Schritte benötigt. Entscheidend ist jetzt zu verstehen, welches Plugin oder Theme für welche Schrift verantwortlich ist. Font Awesome und eicons stammen von Elementor. Google Fonts werden meist vom Theme eingebunden; bei Astra ist das der Hook astra-google-fonts.

Schritt 2: Styles deaktivieren, die Schriften laden

Nun geht es darum, die Standardeinbindung dieser Schriften zu entfernen, um sie anschließend mit den korrekten Einstellungen zurückzubringen. Gehen Sie in die functions.php des Child-Themes (oder ein Code-Plugin wie Code Snippets) und fügen Sie Folgendes hinzu:

1
/**
2
 * Disable styles that load problematic fonts
3
 */
4
function sdstudio_dequeue_font_styles()
5
{
6
    // Astra — Google Fonts
7
    wp_dequeue_style('astra-google-fonts');
8
    wp_deregister_style('astra-google-fonts');
9
 
10
    // Elementor — Font Awesome 4
11
    wp_dequeue_style('font-awesome');
12
    wp_deregister_style('font-awesome');
13
 
14
    // Elementor — eicons
15
    wp_dequeue_style('elementor-icons');
16
    wp_deregister_style('elementor-icons');
17
}
18
add_action('wp_enqueue_scripts', 'sdstudio_dequeue_font_styles', 9999);
19
add_action('wp_head', 'sdstudio_dequeue_font_styles', 9999);

Die Priorität 9999 ist wichtig: Der Hook muss NACH der Registrierung der Styles durch Plugins und Theme ausgeführt werden. Falls die Schrift weiterhin geladen wird, prüfen Sie, ob ein anderes Plugin sie aufruft (zum Beispiel kann ein Menü oder ein Kontaktformular eine eigene Font-Awesome-Version einbinden). Durchsuchen Sie die Plugin-Dateien nach der Zeichenkette wp_enqueue_style mit dem entsprechenden Handle.

Nach dem Hinzufügen des Codes verschwindet das Font-Awesome-Icon auf der Website vorübergehend; das ist normal. Wir bringen es in Schritt 4 zurück.

Schritt 3: Schriftdateien in ein lokales Verzeichnis kopieren

Wenn eine Schrift per CDN oder über ein Plugin eingebunden wird, führt der Browser eine zusätzliche DNS-Anfrage an eine Drittanbieter-Domain aus. Lokales Schrift-Hosting beseitigt diese Verzögerung. Das Vorgehen:

• Finden Sie die Schriftdateien in der Plugin-Struktur. Für Font Awesome von Elementor lautet der Pfad: /wp-content/plugins/elementor/assets/lib/font-awesome/fonts/. Für eicons: /wp-content/plugins/elementor/assets/lib/eicons/fonts/. Bei Google Fonts laden Sie die .woff2-Dateien vom Google-Fonts-CDN herunter.

• Erstellen Sie im Wurzelverzeichnis der Website einen Ordner /wp-content/fonts/ und kopieren Sie alle benötigten Dateien dorthin. Die Formate .woff2 (moderne Browser) und .woff (Fallback für ältere) sind ausreichend.

• Falls die Schrift vom Theme über das Google-Fonts-CDN eingebunden wurde, laden Sie die aktuelle .woff2-Datei manuell per Direktlink oder mit dem Plugin OMGF herunter (dazu später mehr).

Jetzt hat jede Schrift einen lokalen Pfad wie /wp-content/fonts/fontawesome-webfont.woff2. Kommen wir zum wichtigsten Teil: der Einbindung.

Schritt 4: Schriften mit font-display: swap und Preload einbinden

Styles sind deaktiviert, Dateien sind vorhanden. Nun definieren wir @font-face mit der korrekten font-display: swap-Direktive und ergänzen preload für sofortiges Laden. Platzieren Sie den Code in der functions.php über den wp_head-Hook:

1
/**
2
 * Load fonts locally with font-display: swap and preload
3
 */
4
function sdstudio_inject_font_preload()
5
{
6
    ?>
7
    <!-- Preload critical fonts -->
8
    <link rel="preload" href="/wp-content/fonts/fontawesome-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
9
    <link rel="preload" href="/wp-content/fonts/eicons.woff2" as="font" type="font/woff2" crossorigin="anonymous">
10
 
11
    <style>
12
        /* Font Awesome — icon font */
13
        @font-face {
14
            font-family: 'FontAwesome';
15
            font-display: swap;
16
            font-style: normal;
17
            font-weight: normal;
18
            src: url('/wp-content/fonts/fontawesome-webfont.woff2') format('woff2'),
19
                 url('/wp-content/fonts/fontawesome-webfont.woff') format('woff');
20
        }
21
 
22
        /* eicons — Elementor icons */
23
        @font-face {
24
            font-family: 'eicons';
25
            font-display: swap;
26
            font-style: normal;
27
            font-weight: normal;
28
            src: url('/wp-content/fonts/eicons.woff2') format('woff2'),
29
                 url('/wp-content/fonts/eicons.woff') format('woff');
30
        }
31
    </style>
32
    <?php
33
}
34
add_action('wp_head', 'sdstudio_inject_font_preload', 5);

Die Priorität 5 in wp_head sorgt dafür, dass die Preload-Tags im <head> unter den ersten erscheinen, sodass der Browser mit dem Herunterladen der Schrift beginnt, bevor er das CSS erreicht. Das Attribut crossorigin="anonymous" ist für Schrift-Preloading zwingend erforderlich: Ohne dieses Attribut ignoriert der Browser das Preload und lädt die Datei erneut herunter.

Eine wichtige Nuance: Die URL innerhalb von @font-face sollte keine Query-Parameter wie ?#iefix oder ?v=4.7.0 enthalten. PageSpeed Insights stolpert bei der Analyse darüber. Der Link sollte sauber sein: /wp-content/fonts/fontawesome-webfont.woff2, mehr nicht.

Leeren Sie nach dem Hinzufügen des Codes den Cache (Caching-Plugin + Cloudflare, falls verwendet) und führen Sie PageSpeed Insights erneut aus. Die Schriftwarnung sollte verschwinden. Die Font-Awesome-Icons kehren an ihren Platz zurück, blockieren jetzt aber nicht mehr die Textanzeige.

Schritt 5: Benutzerdefinierte Elementor-Schriften, ein Sonderfall

Wenn Sie Elementor Pro mit der Funktion „Custom Fonts" nutzen, ist die Logik dieselbe, es kommen jedoch zwei zusätzliche Schritte hinzu.

Erstens, ändern Sie den Schriftpfad in den Elementor-Einstellungen. Gehen Sie zu Elementor → Custom Fonts, öffnen Sie die gewünschte Schrift und geben Sie im URL-Feld den lokalen Pfad /wp-content/fonts/your-font.woff2 anstelle eines externen CDN- oder Google-Fonts-Links an:

Zweitens, bauen Sie das Elementor-CSS neu auf. Nach der Pfadänderung gehen Sie zu Elementor → Tools → Regenerate CSS und klicken auf die Schaltfläche zur Neugenerierung. Dadurch wird Elementor gezwungen, die Style-Dateien mit den neuen Schriftpfaden neu zu erstellen:

Überprüfen Sie nach der Neugenerierung, ob der Schriftpfad im HTML der Seite auf die lokale Datei verweist und nicht auf das CDN. Fügen Sie dann in der header.php (oder per wp_head wie in Schritt 4) das Preload für diese Schrift hinzu:

1
<link rel="preload" href="/wp-content/fonts/FuturaBookC.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Und das entsprechende @font-face mit font-display: swap:

1
@font-face {
2
    font-family: 'FuturaBookC';
3
    font-display: swap;
4
    font-style: normal;
5
    font-weight: normal;
6
    src: url('/wp-content/fonts/FuturaBookC.woff2') format('woff2'),
7
         url('/wp-content/fonts/FuturaBookC.woff') format('woff');
8
}

Alternativer Weg: Plugins zur automatischen Optimierung

Die manuelle Methode gibt Ihnen volle Kontrolle, erfordert aber Aufmerksamkeit bei Plugin-Updates (ein Elementor-Update kann die Standardschrifteinbindung wiederherstellen). Wenn Sie den Prozess automatisieren möchten, gibt es zwei Plugins, die die Aufgabe ohne Codeänderungen lösen.

OMGF (Optimize My Google Fonts). Ein kostenloses Plugin, das alle Google Fonts auf der Website scannt, sie lokal herunterlädt und automatisch font-display: swap hinzufügt. Installieren Sie es, klicken Sie auf „Optimize", und alle Google Fonts Ihres Themes werden mit korrekten Headern lokal eingebunden. Die Pro-Version kann mit Adobe Fonts und beliebigen Drittanbieter-CDN-Schriften arbeiten.

Swap Google Fonts Display. Ein minimalistisches Plugin, das genau eine Sache tut: Es fügt allen Google Fonts im laufenden Betrieb font-display: swap hinzu. Es lädt nicht lokal herunter, beseitigt aber die PageSpeed-Insights-Warnung innerhalb von 10 Sekunden nach der Installation. Geeignet als Übergangslösung oder wenn lokales Schrift-Hosting nicht entscheidend ist.

Plugins sparen Zeit, aber bedenken Sie: Sie funktionieren nur mit Google Fonts. Icon-Schriften (Font Awesome, eicons) und benutzerdefinierte Elementor-Schriften werden nicht berührt; hier müssen Sie weiterhin die manuellen Schritte 1 bis 5 durchlaufen.

⁉️🤔 Häufig gestellte Fragen

Muss ich ALLE Schriften auf der Website vorladen?

Nein. <link rel="preload"> ist nur für ein oder zwei Schriften sinnvoll, die im sichtbaren Bereich erscheinen, zum Beispiel die Schrift der H1-Überschrift und die des Fließtextes. Ein Dutzend Schriften vorzuladen bewirkt das Gegenteil: Der Browser verwendet Bandbreite für Dateien, die gerade nicht benötigt werden, und verlangsamt das Laden kritischer Inhalte. Laden Sie nur Schriften vor, die im ersten Viewport verwendet werden. Bei einem typischen Blog sind das eine Überschriftenschrift und eine Textschrift, insgesamt zwei woff2-Dateien. Das Vorladen einer Icon-Schrift lohnt sich nur, wenn ein Icon im sichtbaren Bereich erscheint (Menü, Suche). Alles andere lädt beim Scrollen nach, ohne die PageSpeed-Metriken zu beeinträchtigen.

Was tun, wenn die Website nach dem Deaktivieren der Styles „kaputtgeht"?

Das häufigste Szenario: Sie haben elementor-icons deaktiviert, und die Slider-Pfeile oder das Such-Icon sind verschwunden. Die Lösung: Prüfen Sie vor dem Deaktivieren, welche konkreten Elemente die Schrift verwenden. Öffnen Sie die DevTools (F12), Tab „Elements", suchen Sie das Icon und sehen Sie sich die CSS-Klasse an. Beginnt die Klasse mit fa-, handelt es sich um Font Awesome. Beginnt sie mit eicon-, sind es eicons. Deaktivieren Sie nur das, was tatsächlich verwendet wird, und binden Sie dieselben Dateien lokal ein; optisch ändert sich nichts. Die Website geht in zwei Fällen „kaputt": Entweder haben Sie einen Style deaktiviert, der neben der Schrift auch CSS-Regeln enthielt (selten, kommt aber bei Themes wie Astra vor), oder Sie haben die Schrift lokal nicht wieder eingebunden. Im ersten Fall extrahieren Sie die CSS-Regeln aus der deaktivierten Datei und kopieren sie in Ihren wp_head-Block. Im zweiten Fall ergänzen Sie einfach das fehlende @font-face.

Funktioniert diese Methode für jedes WordPress-Theme?

Ja, mit Einschränkungen. Das Prinzip dequeue style → local fonts → font-display: swap → preload ist universell. Nur die Style-Handles ändern sich: Für Astra ist es astra-google-fonts, für GeneratePress generate-fonts, für OceanWP oceanwp-google-fonts. Um das Handle Ihres Themes zu finden, öffnen Sie den Seitenquelltext (Strg+U), suchen Sie nach <link rel="stylesheet" mit der Schrift und sehen Sie sich das id-Attribut des Tags an; das ist das Handle. Setzen Sie es dann in wp_dequeue_style ein. Moderne Themes (2024-2026) liefern zunehmend font-display: swap ab Werk mit: Twenty Twenty-Five und Block-Themes auf Basis von theme.json verfügen bereits über diese Einstellung. Prüfen Sie vor Codeänderungen, ob Ihr Theme bereits alles korrekt macht und die Warnung nur durch eine Icon-Schrift aus einem separaten Plugin verursacht wird.

Ist das lokale Kopieren der Schriften zwingend erforderlich?

Technisch gesehen nein. font-display: swap funktioniert auch mit Schriften, die per CDN (Google Fonts, cdnjs) eingebunden werden. Lokales Hosting bietet jedoch zwei Vorteile: Erstens entfällt eine zusätzliche DNS-Anfrage an eine Drittanbieter-Domain (das spart 50-200 ms), und zweitens sind Sie nicht von der CDN-Verfügbarkeit abhängig. Sollte Google Fonts ausfallen, bleibt Ihre Website mit lesbarem Text erhalten. Für eine Produktivseite ist lokales Hosting Best Practice; für ein privates Projekt ist es optional. Ausnahme: Icon-Schriften. Font Awesome, eicons und dashicons werden vom Plugin geladen (per Definition lokal); das Kopieren ins Wurzelverzeichnis ist nur nötig, um nach dem Dequeue die Kontrolle über das Laden zu „übernehmen". Die Datei selbst befindet sich bereits physisch auf dem Server.

Was gegen die Schriftwarnung zu tun ist: Der abschließende Algorithmus

Gehen Sie die fünf Schritte dieser Anleitung durch, und die Warnung „Ensure text remains visible during webfont load" verschwindet aus dem PageSpeed-Insights-Bericht. Kurz gesagt: Standardeinbindung deaktivieren → Schriften lokal ablegen → mit font-display: swap zurückbringen → kritisches woff2 vorladen → für Elementor zusätzlich den Pfad ändern und CSS neu aufbauen. Im Ergebnis ist der Text auf der Website sofort sichtbar, die Metriken LCP und FCP verbessern sich, und der Besucher sieht keine „springende" Seite.

Wenn Sie nicht in den Code eintauchen möchten, beginnen Sie mit dem OMGF-Plugin für Google Fonts. Für Icon-Schriften gibt es keine Plugin-„Wunderpille"; diese müssen Sie weiterhin manuell bearbeiten, aber das sind 20 Minuten Arbeit, die sich durch höhere PageSpeed-Werte und echte Verbesserungen der Ladegeschwindigkeit auszahlen. Probieren Sie es aus und testen Sie nach jeder Änderung; erst ein wiederholter Audit zeigt, dass das Problem tatsächlich behoben ist.