Lösung: Darauf achten dass der Text während der Webfont-Ladevorgänge sichtbar bleibt

Wer schon einmal mit PageSpeed Insights seine Seite getestet hat, stößt vielleicht auf die folgende Meldung bzw. Vorschlag:

Darauf achten dass der Text während der Webfont-Ladevorgänge sichtbar bleibt

Sie können Gebrauch von der CSS-Funktion „font-display“ machen, um sicherzugehen, dass der Text für Nutzer sichtbar ist, während Webfonts geladen werden.

Um diese Meldung zu beseitigen muss dass CSS in Ihrem System angepasst werden. Hierbei gilt es zu beachten, welcher Font geladen wird. In der Auswertung von Google sieht man welcher Font von welcher Quelle stammt.

Webschriftarten die außergewöhnlich sind werden extern eingebunden oder vom eigenen Sever gehostet. Außergewöhnliche Schriftarten sind auf den PC’s und SmartPhones dieser Welt nicht zu finden.

Daher werden Sie verzögert geladen und bis dahin wird standardmäßig kein Text/Font angezeigt. Um die Art zu bestimmen wie die Fonts geladen werden gibt es unterschiedliche Parameter die im Quellcode auf dem Server gesetzt werden können.

@font-face-Regel bindet Schriftdateien ein
|
| Frei wählbarer Name für die Schrift
| |
@font-face { |
font-family: Route;
font-display: swap;
src: url(/fonts/route/Route.woff2),
url(/fonts/route/Route.woff); }
^
|
+- Link zur Schriftdatei

In diesem Fall wurde der Paramter „font-dispay: swap;“ eingebunden. Dieser sorgt dafür, dass vor der Schriftart die z.B. extern eingebunden ist, eine andere Schriftart eingeblendet bzw. geladen wird.

Der Fehler in PageSpeed Insights sollte nun nach der Einbindung dieses Parameters nicht mehr erscheinen.

  Suchmaschinen       

4 Kommentare zu diesem Beitrag

  • Avatar

    Die SASS Version von Font Awesome bindet das Font Face von sich aus mit ein in der fertigen CSS. Die Fehlermeldung kommt trotzdem auf Insights.

    Antworten
  • Avatar

    Hey. Ich habe nicht ganz verstanden wo der Code eingebunden werden muss? Im Theme Ordner?

    LG und danke!

    Antworten
  • Avatar

    Hallo zusammen,
    wo muss dieser Code eingebunden werden? In der Style.css des Themes? Frage deshalb, da ich dort die Fonts, die von Pagespeed Insights moniert werden aufgeführt habe.

    VG

    Antworten
  • Avatar

    Hallo,

    ich habe den Code jetzt in Word kopiert und auf meinem Desktop gespeichert. Google beschwert sich aber immer noch. Was mache ich denn falsch?

    LG

    Antworten

Kommentar hinterlassen



Weitere Artikel

Unsere Meinung zu content.de

Unsere Meinung zu content.de

Was leistet content.de? Für die Vorstellung des Portals zitiere ich direkt die "Herstellerwebseite": content.de ist Innovationsführer für die Erstellung von Unique Content ...
Weiterlesen
Leads über das Internet

Leads über das Internet

Leads über das Internet generieren, wie soll das funktionieren? Genau diese Frage behandeln wir in diesem kurzen Artikel. Das Internet ...
Weiterlesen
Suchmaschinen und gute Texte: wie Deckel und Kochtopf!

Suchmaschinen und gute Texte: wie Deckel und Kochtopf!

Suchmaschinen lieben gute Texte! Jeder, der eine Webseite hat, weiß es: Wenn Besucher nach zwei Sätzen einschlafen, sind die Texte ...
Weiterlesen
Ein Appell an alle Unternehmer und Geschäftsführer

Ein Appell an alle Unternehmer und Geschäftsführer

Bewegen Sie sich innerhalb Ihrer Zielgruppe und schaffen Sie einen Mehrwert. Arbeiten Sie für Ihre Zielgruppe und damit auch für die ...
Weiterlesen
Content is King - schon gehört?

Content is King – schon gehört?

Wie Sie zielsicher gefunden werden im Ozean des Internets! Natürlich möchten Sie als Unternehmer, Freiberufler oder Selbständiger besser im Internet ...
Weiterlesen
Lösung: Darauf achten dass der Text während der Webfont-Ladevorgänge sichtbar bleibt

Lösung: Darauf achten dass der Text während der Webfont-Ladevorgänge sichtbar bleibt

Wer schon einmal mit PageSpeed Insights seine Seite getestet hat, stößt vielleicht auf die folgende Meldung bzw. Vorschlag: Darauf achten ...
Weiterlesen