FastWP

WordPress. Performance.

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


Auf Facebook teilen

wefonts-gegen-system-fonts

Webfonts sind Fluch und Segen zugleich

In diesem Artikel geht es speziell um das Thema Webfonts, ein sehr wichtiges Thema. Webfonts sind nämlich durchaus verlockend und doch nicht immer ratsam. Als Typographie-Liebhaber empfinde ich Webfonts zunächst einmal als Segen. 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?


Auf Facebook teilen

Kommentare

  1. Sven sagt:

    Früher gab es bei Google Fonts ja auch mal die Möglichkeit, sich die Ladegeschwindigkeit der einzelnen Fonts anzeigen zu lassen. Ein Feature, das ich sehr vermisse, wenn man aus Gestaltungsgründen doch lieber auf Webfonts zurückgreifen möchte.

  2. Franz Meyer sagt:

    Was bedeuten denn die ersten beiden Angaben nach dem :
    font-family: -apple-system, BlinkMacSystemFont, „Segoe UI“, Roboto, Ubuntu, „Helvetica Neue“, Arial, sans-serif;

  3. Deciso sagt:

    @Franz Meyer
    Die jeweiligen System Fonts vom Mac (San Francisco), die sortierten Schriftarten und in letzter Instanz eine Sans-Serif Font. Ganz einfach gehalten und je nach Wunsch auch veränderbar.

  4. Franz Meyer sagt:

    Vielen Dank für die Antwort!
    Sind diese ganzen Schriftarten eigentlich alle gleich groß? Denn es gibt ja Schriftarten, die sind kleiner als andere und wenn man verschiedene Schriftarten angibt (also in der CSS) und dann die eine oder andere auf dem einen oder anderen System nicht vorhanden ist, dann wäre es ja nicht gerade optimal, wenn die verwendete Schriftart kleiner oder größer ist und dann der Text schlecht lesbar ist.

  5. Deciso sagt:

    @Franz Meyer
    Darum geht es nicht. Jede System Font sieht auf dem jeweiligen System einfach am besten aus. Natürlich sind die nicht alle gleich. Die Fonts sind aber immer vorhanden, da es eben System Fonts sind. Deshalb ist es ja auch so genial und gut umsetzbar. Früher ging das nicht, heute hat aber jedes große System auch seine eigene Font.

    PS: Du brauchst keine Wegwerf-Mail nutzen. Wenn du keine E-Mail angeben willst, warum auch immer, lass es einfach sein.

  6. Karluski sagt:

    Webfonts sollen in der aktuellen Zeit keinen Platz mehr haben??? Entschuldigung, es gibt noch ein Leben ausserhalb der zwanghaften Performance-Steigerungen. Es gibt daneben noch ein klein wenig GESTALTUNG. Schon mal was von Corporate Design gehört? Der Unternehmenskunde haut mir die Seite um die Ohren, wenn ich nach Jahren mit Verdana oder Arial, nun wieder seine Hausschriften ignoriere.

  7. Deciso sagt:

    @Karluski
    Jetzt mal locker bleiben ;) Deshalb nenne ich ja mich als Beispiel, weil die Schrift weder für mich gemacht war, noch etwas Besonderes. Natürlich haben auch Unternehmen ihre eigenen Schriften, ich sag nur Mercedes oder die Deutsche Bahn, aber davon reden wir hier ja nicht zwingend. Also locker bleiben. Verdana und Arial sind auch nicht die Schriften, von denen ich hier spreche.

  8. Franz Meyer sagt:

    Naja, wenn ich aber in der CSS für einen bestimmten Text verschiedene Schriftarten hinterlege, dann brauche ich doch Schriftarten, die alle gleich groß sind, so dass der Text beispielsweise auf dem iPhone in der gleichen Größe dargestellt wird wie auf einem Samsung Galaxy. Und auf einem Mac sollte der Text auch die gleiche Größe haben wie auf einem Windows-Rechner. Mir ist schon klar, dass du die Vorteile von Schriftarten die schon oft im System vorhanden sind anpreist und ich würde am liebsten auch stets solche Schriftarten verwenden, aber eben nur, wenn alle Schriftarten, die ich angegeben habe, die gleiche Größe haben.
    Oder verstehe ich doch etwas falsch?

  9. Isabell sagt:

    Welche Schriftarten gibt es eigentlich, die auf Windows, Linux, Android, OS und iOS Standardmäßig vorhanden sind???

  10. Deciso sagt:

    @Isabell
    Natürlich die, die oben entsprechend angegeben sind. Deshalb ja der Code für die CSS ;)

  11. Isabell sagt:

    Danke für deine Antwort. Ich habe jedoch etwas anderes gemeint. Du selbst hast ja nur eine einzige Schriftart, nämlich Georgia, in Verwendung und wenn ich ebenfalls nur eine einzige Schriftart angeben möchte, welche Schriftarten stehen mir dann zur Verfügung, wenn diese auf jedem System vorhanden sein sollen?

  12. Alex sagt:

    Da stimme ich ganz und gar nicht überein. :) Fonts sind DIE Highlights auf einer Seite heutzutage. Damit lassen sich großartige Sachen anstellen. Lieber ein Tick weniger Performance aber dafür eine schöne Font.

    Was aber für mich bspw. in Ordnung ist, ist das Nachladen einer Font im Footer.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Um offensichtlichen Spam zuverlässig herauszufiltern, werden die Kommentare händisch moderiert, erscheinen also erst nach manueller Freischaltung und einer kurzen Wartezeit.