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

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

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
Magische Texte für Ihr Internetmarketing

Magische Texte für Ihr Internetmarketing

Magische Texte für Ihr Internetmarketing Fakt ist: Wer heute im Internet unterwegs ist, hat es eilig und keine Zeit Romane ...
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
1&1 List Local Basic / Pro - unsere Meinung

1&1 List Local Basic / Pro – unsere Meinung

Durch eine Kundenanfrage sind wir auf das Produkt 1&1 List Local Basic von 1und1 aufmerksam geworden. Dies haben wir zum Anlass genommen ...
Weiterlesen
So gewinnen Sie Kunden in der Technologieregion Karlsruhe

So gewinnen Sie Kunden in der Technologieregion Karlsruhe

Die Technologieregion Karlsruhe gehört zu den führenden Technologieregionen in Europa. Geprägt wird diese Region von einem vielseitigen Branchenmix, in dem ...
Weiterlesen
Unsere Meinung zur Sistrix Toolbox

Unsere Meinung zur Sistrix Toolbox

In diesem kurzen Erfahrungs- und Testbericht möchten wir einen kleinen Input über die Sistrix Toolbox geben und unsere persönlichen Erfahrungen zu diesem "Webtool". Eines vorweg: ...
Weiterlesen