So lässt sich das Performance-Problem von @font-face in den Griff bekommen

@font-face, Web-Fonts und das Performance-Problem
Keine Kommentare

Dass Web-Fonts immer beliebter werden, ist kein Geheimnis – und auch nicht verwunderlich, immerhin bieten sie Webdesignern viele Möglichkeiten, das Aussehen einer Website mit einem Hingucker zu versehen. Was viele dabei allerdings nicht bedenken, ist die Performance der Seite. Genau die leidet aber oft, wenn Web-Fonts nicht richtig implementiert werden.

Dabei ist @font-face kein neues CSS-Feature, und schon seit 2010 nimmt dessen Nutzung rapide zu. Allerdings sieht das Web heutzutage deutlich anders aus als vor fünf Jahren. Während damals eine Standard-@font-face-Deklaration EOT-,TTF-,WOFF- und SVG-Variationen benötigte, um über die verschiedenen Browser hinweg zuverlässig zu funktionieren, reicht für einen Cross-Browser-Support heute meist die WOFF-Variation aus. Auch Mobile-Support spielte in 2010 eher eine untergeordnete Rolle; im Gegensatz dazu gilt mittlerweile jedoch ein eindeutiger „Mobile-First“-Ansatz beim Thema Webdesign.

Kein Wunder also, dass viele User frustriert eine Seite verlassen, weil die falsche Nutzung von @font-face auf die Performance drückt. Chris Manning zeigt, warum das CSS-Feature schnell zum (Performance-) Problem wird, wie sich die Font-Loading-Performance verbessern lässt und wie die Zukunft von Web-Fonts aussehen könnte.

@font-face und das Performance-Problem

Eigentlich sollte man meinen, dass die Nutzung von @font-face kaum Probleme verursachen sollte –immerhin gibt es das Feature bereits seit Jahren und laut caniuse.com liegt der Support des Features in den gängigen Browsern bei 92,2 Prozent. Trotzdem ist es vor allem die Performance, die oft zur Stolperfalle bei der Nutzung von Web-Fonts wird.

Als Firefox und Opera in 2009 erstmals mit Support von @font-face veröffentlicht wurden, wurde Text mit den Fallback-Fonts gerendert, bis die eigentlichen Font-Ressourcen zur Verfügung standen. Das Resultat: FOUT (Flash of Unstyled Text). Um das Problem zu umgehen, gingen viele Browser-Hersteller dazu über, Text zu verstecken, während die genutzten Schriftarten heruntergeladen wurden.

Während das zwar damals das FOUT-Problem löste, kreierte es aber ein neues Problem, dass sich auch heute noch in vielen Websites finden lässt – nämlich den „Flash of Invisible Text“, auch genannte FOIT. Denn während zwar Fallback-Fonts im Code definiert wurden, schreiben immer noch viele Browser vor, dass Text solange transparent bleibt, bis die eigentliche Schriftart herunter- oder aus dem Cache geladen wurde.

Je nach Browser unterscheiden sich die Wartezeiten bis zum Time-Out deutlich. Für den User heißt das jedoch vor allem eins: warten, bis die Seite vollständig geladen ist. Im Zweifelsfall kann das ganz schön dauern und von einer guten User Experience kann dabei kaum noch die Rede sein.

Font-Loading-Techniken

Doch nicht nur auf dem Desktop sorgt @font-face so für Performance-Probleme. Gerade auf Mobile Devices – insbesondere bei schlechten oder langsamen Netzwerkverbindungen – wird das Herunterladen von Web-Fonts zur Geduldsprobe. Dazu sagt Manning:

To fix it, we need to load @font-face in a way that doesn’t block render.

Mithilfe von JavaScript kann die Performance beim Laden von Custom Fonts jedoch deutlich beschleunigt werden. Zur Auswahl stehen dafür verschiedene Font-Loader, wie zum Beispiel:

Web Font Loader

Der Web Font Loader vergleicht die Breite zweier spans, während die Seite geladen wird, um festzustellen, ob und wann eine Web-Font zur Nutzung bereitsteht. Wird der Font-Loader asynchron genutzt, kann damit verhindert werden, dass das Laden der Seite blockiert wird.

Font Face Observer

Eine weitere, mit gerade einmal 4KB minified besonders leichtgewichtige Option ist Font Face Observer. Ähnlich wie der Web Font Loader überwacht Font Face Oberserver das Laden von Web-Fonts in einer Website und nutzt zusätzlich Scroll-Events zum effektiveren Erkennen von Font-Loads – und zwar mit so wenig Overhead wie möglich.

LocalFont

Der kostenlose Dienst LocalFont ermöglicht das einfachere Laden und Abfragen von Schriftarten aus localStorage. Dabei konvertiert die Website die Font-Dateien zu base64 und generiert das benötigte CSS und JavaScript.

Um den Übergang von Fallback- zur eigentlichen Web-Font weicher zu gestalten, ist es wichtig, zunächst eine passende Fallback-Schriftart auszuwählen. Zusätzlich kann etwa auch der Reflow minimiert werden, indem die Schriftgröße und der Zeilenabstand der Fallback-Font dem der Web-Font so ähnlich wie möglich angepasst werden.

Font Loading: ein Blick in die Zukunft

Wie bereits eingangs erwähnt, sollten Web-Fonts geladen werden, ohne das Text-Rendering zu blockieren. Während die Standard-Nutzung von @font-face die Performance einer Website deutlich beeinträchtigen kann, gibt es immer mehr Möglichkeiten, die damit einhergehenden Probleme zu umgehen – und auch die Zukunft des Font-Loadings sieht vielversprechend aus.

So bieten sowohl Chrome als auch Opera bereits Support für das Font Loading API, das nativ auf @font-face hört und so die Notwendigkeit für bestehende JavaScript-Loader entfernt. Zudem gibt es auch ein Font Loading Polyfill, das die entsprechende Funktionalität auch in Browsern zur Verfügung stellt, die das Font Loading API bisher nicht unterstützen.

Ebenso wird derzeit am CSS Font Rendering Draft gearbeitet, allerdings steht noch nicht fest, wann die entsprechende Spezifikation für die produktive Nutzung zur Verfügung stehen wird. CSS Font Rendering soll es Entwicklern dann jedoch ermöglichen, das Rendering-Verhalten eines Browsers mit reinem CSS zu kontrollieren und so für eine bessere Performance beim Laden von Web-Fonts zu sorgen.

webinale – the holistic web conference

Diversity matters – Onlinemarketing 2020

mit Astrid Kramer (Astrid Kramer Consulting)

Das Recht auf Privatsphäre – eine Chance für UX

mit Lutz Schmitt (Lutz Schmitt Design & Consulting)

The Revenge of Structured Data

mit Stephan Cifka (Performics Germany GmbH)

Aufmacherbild: vector illustration with rainbow letters (modifiziert) von Shutterstock / Urheberrecht: avian

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -