Warum Webfonts nicht mehr zeitgemäß und System Fonts oft die bessere Wahl sind

Webfonts sind Fluch und Segen zugleich

Schriften können so viel ausmachen, verändern und aussagen, sie sind ein sehr mächtiges Werkzeug der Gestaltung und doch werden sie oft vergessen, oder als nicht so wichtig abgetan. Dem ist aber ganz und gar nicht so, denn eine gute Font kann für sich stehen, eine schlechte kann Texte zu unlesbaren Blöcken verschandeln. Alles schön und gut, doch Webfonts haben einen gigantischen Nachteil, nämlich die Ladezeit, sowie die Art und Weise wie sie geladen werden. Aber schauen wir uns das Ganze noch einmal ein wenig genauer an.

Performance mit und ohne Webfonts

Nun gehöre ich zu den praktischen Menschen und teste viel. Sowohl in meinem Buch zur Wordpress Performance, als auch in einem Artikel, habe ich Webfonts und deren minimale und bestmögliche Einbindung, bereits ausführlich thematisiert. Auch auf FastWP gab es bislang eine Webfont und durch die geschickte Integration und das sorgfältige Caching selbiger, gab es mit dieser Font auch absolut keine Performance-Probleme oder ähnliches.

Trotzdem war und ist die Schrift für sich betrachtet wertlos, da sie weder für diesen Blog erstellt wurde, noch besonders hochwertig gewesen ist. Sie erlaubte mir einfach nur stärkere Kontraste zu schaffen, die besser zur Gestaltung des Blogs passten. Doch Webfonts machen gerne mal Probleme, insbesondere auf Smartphone und Tablet und vor allem immer dann, wenn das Internet mal wieder viel zu langsam ist. Ein Faktor, der nicht unterschätzt werden sollte.

Typische Probleme mit Webfonts

Es gibt mehrere Arten von Problemen, welche durch eine falsch oder schlecht integrierte Webfont herbeigeführt werden. Mir persönlich begegneten diese in letzter Zeit wieder so häufig, dass es mich wachrüttelte und mir klarmachte, dass Webfonts im aktuellen Zustand absolute keine gute Wahl sind. Das es Webfonts zurzeit gar nicht mehr braucht. Das Webfonts vielleicht sogar wieder vergessen werden sollten. Vor allem aber fiel mir auf, wie viele Blogs Webfonts unsinnig, falsch, oder schlichtweg stillos verwenden. Schauen wir uns aber erst einmal die Probleme in Verbindung mit Webfonts an.

Problem 1: Blinkende Webfonts beim laden eines Blogs
Problem 2: Lange Ladezeiten, durch besonders aufwändige Webfonts
Problem 3: Rendering-Probleme, mit Verschiebungen der Objekte

Für sich genommen ist keines der drei Probleme ein Weltuntergang. Fonts müssen erst geladen werden und selbst wenn ihr dabei besonders geschickt vorgeht, hilft euch das bei langsamen Internetverbindungen trotzdem nur wenig, denn dort treten diese Mängel am meisten in Erscheinung. Perfekt optimierte Webfonts sind zusammengenommen meist nur 30-90 Kilobyte groß, doch auch das bedeutet zusätzliche Ladezeit.

Zusätzliche Ladezeit, hasse ich persönlich wie die Pest, vor allem weil ich selbst immer ein Echtmensch-Internet benutze, also eine eher mäßige Verbindung, die viele der eigenen Besucher ebenfalls besitzen. So bekomme ich immer mit, wenn etwas zu langsam ist. Mit Standleitung würde ich das nicht merken, deshalb bin ich ein Verfechter davon, dass Entwickler Echtwelt-Leitungen nutzen sollten, keine künstlichen Limiter. Gerade auf dem Smartphone sind Webfonts oft einfach nur nervig, weil sie all die erwähnten Probleme zusammengenommen präsentieren. Außerdem hasse ich Überflüssiges und genau das sind Webfonts inzwischen geworden.

Webfonts sind nicht mehr zeitgemäß

Nun könnt ihr, wie in meinem Artikel zum Thema Webfonts empfohlen, alle unnötigen Zeichen einer Webfont entfernen. So entkernt ihr die jeweilige Schrift auf das absolute Minimum und erhaltet eine Font, die oft nur noch 5-10 Kilobyte groß ist.

Doch auch das löst viele der Probleme nicht, überfordert einige Blogger auch einfach. Ihr könntet die Webfont auch noch mit LazyLoad verzögert laden, oder asynchron und über spezielle Font-Loader, doch das verschlechtert die allgemeine Performance eigentlich nur und ist, mit Verlaub, ein absolut schwachsinniger Umweg. Nein, darum geht es einfach nicht. Es geht darum, dass Webfonts in der aktuellen Zeit keinen Platz mehr haben. Wie Wordpress im Admin-Bereich, könnt ihr inzwischen clever die System Fonts nutzen, die auf dem jeweiligen System einfach am besten aussehen und die größte Akzeptanz besitzen.

System Fonts sind die neuen Web Save Fonts

System Fonts sind, wenn man so will, die neuen Web Save Fonts. Also Schriftarten, die immer und überall funktionieren. Das ganze Geheimnis dabei ist, dass jedes System inzwischen eine eigene, meist sehr gut gemachte Schriftart besitzt. Google nutzt bei Android beispielsweise »Roboto«, Ubuntu seine eigene Schriftart »Ubuntu«, MacOS die neue Font namens »San Francisco« und Microsoft verwendet im besten Fall die hübsche »Segoe UI«.

Diese speziellen Schriftarten, lassen sich auch effektiv im Web einsetzten. Das hat am Ende den Vorteil, dass euer Blog auf jedem System die bestmögliche Font verwendet und vor allem auch die Schrift, an die der Nutzer systembedingt bereits lange Zeit gewöhnt ist. Die Schrift, die auf dem jeweiligen System am besten aussieht und funktioniert. Der CSS-Code dafür sieht dann wie folgt aus.

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Je nach Geschmack, kann der Code oben auch noch verändert und/oder minimiert werden. Zum Beispiel indem ihr die eher unwichtigen Emojis einfach herausnehmt. Auch »Ubuntu« oder »Helvetica Neue« können eventuell einfach entfernt werden. Hier muss jeder selbst entscheiden, wie viele Variablen er innerhalb der CSS nutzen möchte. Weniger ist immer besser, aber ihr kennt meine Meinung bei dem Thema.

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;

Alles in allem lassen sich so auf sehr einfache Art und Weise die jeweiligen System Fonts für den eigenen Blog nutzen, die fortan entsprechend angezeigt werden. Da diese Fonts immer im jeweiligen System hinterlegt sind und sofort geladen werden können, sehen Texte auf jeder beliebigen Plattform bestmöglich aus. Das ist viel wert, vor allem eben bei mobilen Geräten, wo Text wirklich perfekt lesbar sein muss, um auch zu funktionieren. Oder wo ein gedrosselter Tarif, bei einer großen Webfont, schon einmal ins straucheln gerät. Wo Webfonts vielleicht auch einfach nicht gut aussehen, weil sie zu klein dargestellt werden, oder für Print bzw. größere Darstellungen gedacht sind. Mögliche Probleme mit Webfonts gibt es viele.

Standards sind effektiver als Webfonts

Tja und am Ende bleibt dann die Erkenntnis, dass Webfonts im jetzigen Zustand nicht mehr zwingend notwendig sind, nicht mehr ratsam scheinen, nicht mehr so spektakulär wie damals in Erscheinung treten, als es nur Arial als Alternative gab. Auf vielen Blogs sind Webfonts sogar unnötiger Ballast, vor allem weil sie von unerfahrenen Nutzern gerne mal falsch integriert werden und dann für entsprechende Probleme, oder sogar grobe Darstellungsfehler sorgen.

Außerdem braucht nicht jeder Blog eine Webfont und oft wird es damit auch schlichtweg übertrieben, ungeachtet der Ladezeiten. Einfach weil es so schnell und einfach umsetzbar ist. Auf Krampf eine Webfont zu verwenden, ist aber nicht gut und gerade heutzutage, haben die jeweiligen Plattformen alle ihre eigene, sehr hübsche Schriftart an Board, die auch durchaus genutzt werden sollte. Interessant wird das Thema Webfonts erst wieder mit den neuen variablen Fonts, doch das ist noch Zukunft. Wer Interesse hat, findet einen Artikel von mir auf Blogprojekt, der genau dieses Thema behandelt. Ich jedenfalls werde bei meinen Projekten auf Webfonts verzichten und mich wieder den schnellen, immer noch am besten lesbaren System Fonts zuwenden. Was ihr unternehmt, bleibt euch überlassen. Ich hoffe, ich konnte zumindest zum nachdenken anregen. Was ist eure Meinung zu dem Thema?