Text während der Webfont-Ladevorgänge sichtbar lassen mit „font-display“

In diesem Beitrag zeige ich dir, wie ich die Google PageSpeed Insights Fehlermeldung „Darauf achten, dass der Text während der Webfont-Ladevorgänge sichtbar bleibt“ bei mir auf der Website angegangen bin.

Dazu gleich zwei Infos vorab: Ich nutze WordPress und das Theme GeneratePress. Aber vielleicht hilft dir die Lösung bzw. das Vorgehen auch weiter, wenn du – was sehr wahrscheinlich ist – ein anderes Setup nutzt.

Weitere Informationen im Drop-Down Menü anschauen

Zuerst habe ich mir natürlich die genaueren Informationen zu diesem Fehler bei mir im Google PageSpeed Insights Bericht angeschaut. Bei mir sind hier zwei Problemfälle zu sehen, bei denen ich nochmal einen genaueren Blick auf den Dateipfad geworfen habe:

a) Lightweight Social Icons Plugin

Der erste Eintrag liegt im Plugin Ordner (/plugins/lightweight-social-icons/fonts/fontello.woff) und gehört zu dem von mir mit genutzten Plugin Lightweight Social Icons. Hier kann ich mir jetzt überlegen, ob ich das Plugin wirklich weiterhin nutzen möchte. Denn gegebenenfalls kann ich es austauschen und durch ein anderes Plugin ersetzen oder komplett entfernen, falls ich es gar nicht mehr wirklich benötige.

Ich würde jetzt aber zunächst einmal probieren, eine Lösung für die Weiternutzung des Plugins zu finden. Im Moment habe ich die Icons bei mir im Footer im Einsatz.

Anscheinend ist es bei diesem „Problem“ so, dass man hier font-display: swap im @font-face Style einfügen soll. Bei der lokalen Einbindung von z.B. Google Fonts lässt sich das einfach in der style.css des Child Themes hinzufügen.

In dem Fall liegt der Übeltäter aber in einem Pluginverzeichnis und es handelt sich nicht um einen klassischen Font (zumindest nach meinem Verständnis), sondern um Icons. Daher hat diese Lösung leider nicht funktioniert bei mir.

That’s coming from a plugin you’re using, so you’d have to check with those developers. If they’re icons, then using swap likely won’t make sense. If you want to avoid font icons completely, SVG icons are the way to go.
– Tom Usborne (in diesem Forum)

Das hat meine Annahme dann wohl bestätigt, auch wenn es mich an dieser Stelle dann nicht wirklich weiter bringt. Wahrscheinlich ist die Lösung hier zunächst: Entweder ignorieren oder Plugin löschen bzw. austauschen.

Für’s erste bleibe ich (da es auch nicht besonders tragisch ist) beim Ignorieren.

UPDATE: Die Lösung aus dem zweiten Fall hat auch das Problem vom Plugin mit gelöst. Zumindest taucht der Fehler jetzt gar nicht mehr bei mir im Bericht auf. Glück gehabt.

b) Zweiter Fall bei mir: fonts/generatepress.woff2

Dieser Eintrag lässt sich sehr leicht über die Customizer-Einstellungen ändern und betrifft anscheinend auch nur diejenigen, die schon länger das Theme nutzen. Bei einer Neuinstallation von GeneratePress wird diese Einstellung anscheinend automatisch aktiviert.

Dazu einfach den Customizer in WordPress öffnen und dann unter Allgemein > Icon-Typ von Schriftart auf SVG wechseln.

Nach dem Speichern und einem erneuten Check bei PageSpeed Insights ist der zweite Eintrag jetzt verschwunden.

Bei lokal gehosteten Fonts

Falls du z.B. Google Fonts lokal einbindest, kannst du in der style.css einfach wie auch bei PageSpeed Insights selbst beschrieben die font-display: swap; Angabe hinzufügen.

Ich habe dir das im Beispiel von PageSpeed Insights markiert und den Screenshot dazu eingebunden:

Bei Einbindung der Fonts über einen Google Link (nicht lokal gehostet)

In dem Fall könntest du laut GeneratePress Support einfach folgenden Filter nutzen und diesen z.B. über die functions.php deines Child Themes oder einem Plugin wie Code Snippets einbauen:

add_filter( 'generate_google_font_display', function() {
    return 'swap';
} );

Diese Lösung funktioniert dann aber nur beim GeneratePress Theme.

Wenn du ein anderes Premium Theme nutzen solltest und Probleme bei der Sichtbarkeit der Webfonts bei Ladevorgängen haben solltest, fragst du am besten mal beim Support nach bzw. suchst im Support-Forum des Themes nach einer Lösung. Die Chancen stehen gut, dass du nicht als erste Person diese Frage stellst.

Vor allem, da ja jetzt im Mai 2021 auch ein größeres Google Update ansteht, wo die Web Vitals wohl zum Ranking Faktor aufsteigen werden.

Falls du eine Idee haben solltest, wie ich bei mir den Fall „a)“ mit dem Lightweight Social Icons Plugin noch gelöst bekomme, freue ich mich über Hinweise in einem Kommentar.

Ansonsten werde ich mir in nächster Zeit überlegen, ob ich das Plugin gegebenenfalls lösche und eine andere Lösung für die Icons nutze. Wahrscheinlich benötige ich eh kein Plugin dafür. Aber manchmal siegt halt die Faulheit 😉