Anzeige
Anzeige
News
Artikel merken

Font-Display ermöglicht schnelleres Laden von Fonts

Wir stellen euch die neue CSS-Eigenschaft Font-Display vor. Damit könnt ihr eure Webschriften jetzt noch schneller laden.

Von Jessy Kösterke
2 Min. Lesezeit
Anzeige
Anzeige

(Grafik: Shutterstock.com)

Webfonts sind eine Selbstverständlichkeit heutzutage. Nicht immer gelingt es uns, die gewünschte Schrift auf allen Geräten und Betriebssystemen sauber auszugeben. Es sei denn, wir hoffen das 95 Prozent der Benutzer Verdana oder Arial mögen.

Anzeige
Anzeige

Wenn eine Schrift also nicht schnell geladen wird ist die Wahrscheinlichkeit sehr hoch, dass der Benutzer die Website in Kürze wieder verlassen wird. Zurecht, benutzerfreundlich sieht anders aus.

Was bisher geschah:

Während die Hälfte der Website schon zu sehen ist, ist der Browser im Hintergrund noch ordentlich beschäftigt, unter anderem damit Schriften zu laden. Solange eine Schrift nicht komplett heruntergeladen ist, versteckt der Browser sie. Nach dem vollständigen Laden wird die Webschrift ausgegeben – was auch „Flash Of Invisible Text-Effekt“ (FOIT) genannt wird.

Anzeige
Anzeige

Der Nachteil: Bei einer langsamen Internetverbindung kann es passieren, dass der Benutzer keine Schrift sieht. Standardmäßig wird bei einer Ladezeit, die länger als drei Sekunden ist, eine Fallback-Schrift ausgegeben. Bei Browsern wie Safari, müssen Benutzer noch länger warten.

Anzeige
Anzeige

Um das Problem zu umgehen verwendet man zum Beispiel Javascript-basierte Lösungen, wie Font Face Observer.

Font-Display für’s Volk:

Die CSS-Eigenschaft Font-Display ist seit kurzem auch in Browsern, die auf die Blink-Engine setzen, wie Chrome und Opera, verfügbar.  Sie war zuerst nur als „experimentelles Feature“ in Chrome 49 zu nutzen, jetzt auch in Opera und Opera für Android. Mit Font-Display können Webschriften auf dem gleichen Weg ausgegeben werden wie mit Javascript basierten Lösungen, allerdings ist dafür jetzt nur noch eine Codezeile nötig.

Anzeige
Anzeige

Eingesetzt wird Font-Display in einer @fontface-Deklaration und hat vier verschiedene Werte: auto, swap, fallback und optional.

    • auto:

Das ist der Default-Wert. Und macht nichts anderes als eine Standardfunktion. Der Text wird erst angezeigt, wenn die Schrift vollständig geladen ist.

    • swap:

Dieser Wert wird in den meisten Fällen verwendet und kommt einer Javascript-basierten Lösung am nächsten. Er sorgt dafür, dass der Text unmittelbar mit der gewünschten Font angezeigt wird.

Anzeige
Anzeige
    • fallback:

Ist der Spagat zwischen den ersten beiden Werten. Bei einer Verzögerung von 100 Millisekunden wird die Schrift nicht angezeigt, sondern auf die nächste Webschrift in der Erbfolge zurückgegriffen. Sollte zu dem Zeitpunkt die gewünschte Webschrift geladen sein, wird diese auch ausgegeben.

    • optional:

Die Funktion ist dieselbe wie bei Fallback, außer das der Browser bei einer zu langsamen Internetverbindung sich dazu entscheidet, die Schrift gar nicht zu laden.

Font-Display wird nicht supported?

Der Nachteil an der CSS-Eigenschaft ist der geringe Support – bis jetzt. Es gibt also zwei Möglichkeiten für die Verwendung:

  • Font-Display trotzdem verwenden. Wenn ein Browser die Funktion nicht unterstützt, wird lediglich der Vorteil nicht genutzt. Es wird also nichts falsch ausgegeben. Es lässt nur Benutzer, die keine Blink-Browser verwenden, zurück.
  • Vorher überprüfen ob Font-Display unterstützt wird und gegebenenfalls eine Alternative stellen. Wenn es die Zeit und Ressourcen zulassen, ist das der bessere Weg.
Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
4 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Ruslan

,,Wenn eine Schrift also nicht schnell geladen wird ist die Wahrscheinlichkeit sehr hoch, “

Quellenangabe bitte.

Antworten
Svenja

„Wenn eine Schrift also nicht schnell geladen wird ist die Wahrscheinlichkeit sehr hoch, dass der Benutzer die Website in Kürze wieder verlassen wird. Zurecht, benutzerfreundlich sieht anders aus.“

Wo habt ihr diese Aussage her? Zeigt Quellen ansonsten ist es reine Panik mache bzw. eurer Journalismus geht von Tag zu Tag weiter in den Keller. Was ist nur aus dem T3N geworden, welches ich noch vor 1-2 Jahren kannte.

Antworten
Manuel

„swap: Dieser Wert wird in den meisten Fällen verwendet und kommt einer Javascript-basierten Lösung am nächsten. Er sorgt dafür, dass der Text unmittelbar mit der gewünschten Font angezeigt wird.“

Das ist doch Unfug! Wie die Bezeichnung „swap“ bereits sagt wird hier erst mal überhaupt eine Schrift angezeigt und dann wird geswapped sobald die individuelle Schrift geladen ist. Gäbe es eine Technik mit der die gewünschte Font immer unmittelbar angezeigt wird, dann bräuchte man diesen Artikel gar nicht oder? ;-)

Antworten
JenZzzz

Man kann das langsame Laden von Schriften doch auch übertragen auf langsames Laden von Bildern etc. ingesamt: „wenn die Webseite zu lange lädt ist die Wahrscheinlichkeit sehr hoch, …“
Quellenangabe (obwohl ich nicht der Verfasser bin) z.B.:
https://de.onpage.org/blog/tipps-fur-bessere-website-performance

Immer diese Haarspalterei und Besserwisserei … manchmal nervts ;)

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige