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

Lesedauer ca. < 1 Minute

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.

  Online-Marketing , Suchmaschinen       


Über den Autor


Kommentare

  • 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.

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

    LG und danke!

  • 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

    • Ich kenn ezwar das Template von Ihnen nicht. Aber ich vermute dass man es hier hinterlegen sollte.

  • 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

    • Eventuell liegt es am Cache? Einfach mal einen Inkognito-Tab öffnen.



Wie ist Ihre Meinung zu diesem Thema?

You must be logged in to post a comment.

Ihr direkter Draht zu uns

Machen Sie den ersten und richtigen Schritt.

Online-Marketing Agentur

Leadwerk
Hauptstandort Karlsruhe
Moltkestraße 11
76133 Karlsruhe

Rufen Sie uns an

Festnetz: (+49) 721 9098 1140

Schreiben Sie uns

hallo@leadwerk.de

Unsere Arbeitszeiten

Montag-Freitag 9:00 - 17:30 Uhr

Direkt einen Termin buchen oder Formular ausfüllen.

Mit dem Absenden des Formulars erklären Sie sich mit den Datenschutzbestimmungen einverstanden.

Aktuelle Artikel

Viel Spaß beim Lesen.

Responsive Design für mehr Kunden

Responsive Design für mehr Kunden

Die Tage, in denen ausschließlich der Notebook oder der PC die Pforten ins Internet öffnete, sind schon lange gezählt. Mittlerweile laufen mehr ...
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: Sistrix macht ...
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 Existenzberechtigung Ihrer ...
Weiterlesen
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 nach Kundenwunsch ...
Weiterlesen
Wie schreibe ich einen guten SEO-Artikel?

Wie schreibe ich einen guten SEO-Artikel?

Dieser Artikel beinhaltet das planvolle Vorgehen und die letztendliche Erstellung eines SEO-Artikels auf einer Webseite. Worauf kommt es dabei an? Keywords als ...
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 zu lesen ...
Weiterlesen

Mehr lesen


Inside Leadwerk

Einblicke in unseren Alltag

Einweihungsfeier unseres Büros

Einweihungsfeier unseres Büros

Impressionen von der Einweihungsfeier Unter angepassten Corona-Bedingungen wurde letzte Woche unser Büro in der Moltkestraße 11 in Karlsruhe standesgemäß mit einer Feier ...
Weiterlesen
Wir flitzen durch Karlsruhe

Wir flitzen durch Karlsruhe

Jetzt auch "offline" unterwegs Nach kurzer Überlegung haben wir uns entschieden unser Firmenfahrzeug mit einem Leadwerk-Design bekleben zu lassen. Unsere Wahl ist ...
Weiterlesen
Bald auch bei Ihnen auf dem Parkplatz?

Bald auch bei Ihnen auf dem Parkplatz?

Unser kleiner agiler Stadtflitzer ist demnächst mit neuer Optik auf den Straßen rund um Karlsruhe unterwegs. Vielleicht bald auch in Ihrer Einfahrt? ...
Weiterlesen
Neues Projekt mit Medienpartner

Neues Projekt mit Medienpartner

Mit Kopfsalat gelingt jedes Vorhaben Ich war heute mal wieder zu Besuch bei Kopfsalat Medien in Karlsruhe. Er ist unser kompetenter Medienpartner ...
Weiterlesen
Das letzte Bild hängt!

Das letzte Bild hängt!

Wir haben es geschafft, das letzte Bild im Büro hängt. Im November vergangenen Jahres sind wir in neue Büroräume in der Innenstadt ...
Weiterlesen
Die Kundenpräsente sind gekommen

Die Kundenpräsente sind gekommen

Die neuen Leadwerk-Flaschen sind diese Woche gekommen. ✓ Ab sofort bekommt jeder neue Kunde beim Start einer Zusammenarbeit dieses kleine Präsent von ...
Weiterlesen

Partner & Tools