Die Verwendung von Web Fonts als Gestaltungselement nimmt stetig zu. Im Juli 2015 lieferten 48 Prozent aller Alexa Top-1000 Websites individuelle Web Fonts für mobile Endgeräte aus [Eve15b]. Web Fonts verzögern die Ladezeit einer Webseite durch eine hohe Dateigröße und zusätzliche HTTP-Anfragen. Gleichzeitig bringen sie, abgesehen von der optischen Darstellung, keinen Mehrwert für den Nutzer. Auf die Auslieferung von Web Fonts für mobile Endgeräte sollte, laut Tammy Everts, zugunsten der Ladezeit verzichtet werden [Eve15b]. Dies kann beispielsweise, wie nachfolgend gezeigt, durch die Angabe einer Systemschriftart und zusätzlich einer Web Font über Media Queries im Stylesheet gelöst werden. Aktuelle Browser laden Schriftarten nur dann, wenn diese für die Darstellung anhand des Viewports vorgegeben wurden [Hog15].
body { font-family: Arial, sans-serif; }
@media (min-width: 1000px) {
body { font-family: 'Font-Name', Arial, sans-serif; }
}
Die Dateigröße einer Web Font ist von der gewählten Schriftart und den enthaltenen Schriftschnitten abhängig [Zil13]. Durch die gezielte Auswahl benötigter Schriftzeichen kann eine Reduzierung der Dateigröße erreicht werden [Ste15a]. Zur Einbindung von Web Fonts wird empfohlen, Web-Dienste wie Google Fonts oder Adobe Typekit, anstelle einer lokalen Einbindung, zu nutzen. Diese Dienste sind auf eine möglichst schnelle Auslieferung der Web Fonts durch ein CDN optimiert und können darüber hinaus im Cache des Browsers, durch den Abruf anderer Websites, bereits vorhanden sein [Koc12].
Während des Ladevorgangs von Web Fonts können die Effekte Flash of Unstyled Text (FOUT) und Flash of Invisible Text (FOIT) auftreten. Beide Effekte führen zu einem negativen Einfluss auf die User Experience. FOUT entsteht durch den Austausch der angezeigten Systemschriftart mit der Web Font, sobald diese vollständig geladen wurde. Der Text und zusammenhängende Elemente werden beim Einblenden der Web Font sichtbar verschoben. Dieser Effekt kann, mit Hilfe der Definition einer alternativen Systemschriftart, die nur unwesentlich in Schrifthöhe und Zeichenabstand von der Web Font abweicht, minimiert werden. Bei FOIT wird der Text eingeblendet sobald die Web Font vollständig geladen wurde, bis dahin sind die Texte der Webseite für den Nutzer nicht sichtbar (siehe Abbildung 3.11) [Ste12].
Um eine optimale Performance bei der Verwendung von Web Fonts zu erreichen, empfiehlt sich die Einbindung in dem komprimierten Dateiformat Web Open Font Format 2 (WOFF2) [Ste15a]. Dieses wird von modernen Browsern unterstützt und reduziert das zu übertragende Datenvolumen. Bram Stein berichtet in dem Typekit Blog von einer durchschnittlichen Verbesserung um 30 Prozent, die WOFF2 gegenüber WOFF durch eine verbesserte Komprimierung erreicht [Ste15b]. Die News-Website „The Guardian“ konnte durch einen Wechsel auf eine Schriftart im WOFF2-Dateiformat die Latenzzeit um 200 Millisekunden verringern und 50 Kilobyte Datenvolumen einsparen [Fri14].
Die Einbindung von Web Fonts kann entweder direkt im <head>-Element des HTML-Dokumentes erfolgen oder über die Integration eines Web Font Loaders, der die Schrift asynchron mittels JavaScript nachlädt. Die direkte Einbindung kann, bedingt durch die Dateigröße der gewählten Schriftart und die Datenverbindung des Nutzers, den FOIT-Effekt hervorrufen [Ste15a]. Ein von Google und Typekit mit entwickelter Web Font Loader soll hier Abhilfe schaffen und auch den FOUT-Effekt reduzieren [Ber15].
Bei einem Versuch im Rahmen dieser Arbeit wurden die Auswirkungen der Einbindung von Web Fonts mit WebPagetest evaluiert. Wird zur Darstellung eine Systemschriftart gewählt, dann erscheint die Schrift direkt nach dem Laden des Stylesheets, wie anhand des ersten Filmstreifens in Abbildung 3.12 ersichtlich ist. Der zweite Filmstreifen zeigt das Ergebnis bei der Einbindung einer Web Font über das <head>-Element, ohne die Angabe einer Systemschriftart als Rückfall-Lösung. Dabei kommt es zum FOIT-Effekt und die Schrift erscheint erst nach 0,8 Sekunden, während andere Elemente deutlich früher sichtbar sind. Bei dem letzten Versuch erfolgte die Integration der Web Font durch den Web Font Loader von Google. Bis dieser die Schriftdatei geladen hat, wird eine Systemschriftart angezeigt, die nach 0,9 Sekunden kurzzeitig verschwindet und anschließend durch die Web Font ersetzt wird.
