Webfonts ... und wie man sie falsch verwendet

Möchten Sie die Performance Ihrer Website und die Geduld Ihrer Nutzer mal so richtig auf die Probe stellen? Dann habe ich die perfekte Anleitung für Sie. Bei der Nutzung von Webfonts kann man nämlich erstaunlich viel falsch machen.

Teilen auf

 Thumbnail

Mögen Sie Ihre User und Ihre Arbeitsstelle als Webdev? Nein? Dann sind Sie hier richtig! Ich zeige Ihnen, wie Sie die Zeit Ihrer User mit langen Ladezeiten verschwenden, teure Post vom Anwalt bekommen und direkt noch den einen oder anderen DSGVO-Verstoß an Land ziehen können. Halten Sie sich also genau an folgende Punkte:

Viel ist gut, mehr ist besser

Warum sich für eine oder zwei Schriftarten entscheiden, wenn man alle haben kann? Der eine kleine Text im Dropdown der Navbar schaut in Handwriting schnuckeliger aus? Dann soll der auch seine eigene Schrift bekommen! Am besten lädt man auch Light, Medium und Bold mit rein – man weiß ja nie, was man für die nächste Änderung braucht!

Variable Fonts schlecht

Variable Fonts sind Schriftarten, die ihre Dicke stufenlos ändern können, ohne jede Stufe eigens zu speichern. Klingt praktisch, würde aber allem aus Punkt 1 widersprechen und ist somit tunlichst zu vermeiden.

Ein X für ein U vormachen

Lesbarkeit wird völlig überbewertet. Wer Texte lesen und verstehen kann, hat im schlimmsten Fall noch Fragen oder Interesse. Klingt nach Arbeit. Wer Display oder Handwriting für den Fließtext benutzt, kann diesen Problemen ganz einfach vorbeugen. Gewonnen hat, wer dem User nach drei Wörtern Kopfschmerzen bereitet und ihn frustriert.

"Bin ich das oder ist das mein Monitor?"

Keines von beidem.

😈

Type-Hinting ist die mathematische Optimierung einer Schrift, damit sie auch auf Bildschirmen mit geringer Auflösung scharf bleibt. Weil das kompliziert klingt und damit sich der User selbst hinterfragt, verzichten wir darauf. Auf einem Retina-Display fällt das zwar leider kaum auf, aber auf dem klassischen Office-Monitor im Büro sorgen zerfressene, unscharfe und ungleichmäßige Schriften für Verwirrung und Selbstzweifel.

Sind nicht eh alle Schriften optimiert?

WOFF klingt nach Hund, wir benutzen TTF. Schriftarten fürs Web sollten sich immer am selbst gemachten Logo von vor 15 Jahren orientieren, also heißt es entweder Myriad Pro, Minion Pro oder Helvetica. Der Computer benutzt TTF, das Internet ist auf dem Computer, die Webseite im Internet, also benutzt ist TTF gut genug.

Lizenzen sind teuer und überbewertet

Es gibt Lizenzen für Schriften? Macht das heute nicht eh die KI? Eine Schriftart, die man irgendwo kostenlos für den lokalen Flyer heruntergeladen hat, darf man sicher auch einfach so ins Internet stellen. Beim Flyer hat ja auch keiner was gesagt. Außerdem kostet die Erlaubnis gleich mal mehrere Tausend Euro... Wird schon passen.

Schriften einbinden kostet Speicherplatz

Adobe Fonts oder Google Fonts direkt über die Server der Anbieter einzubinden, ist viel bequemer, als sie auf dem eigenen Server zu speichern. Abgesehen von der Abhängigkeit von einem Drittanbieter schicken wir jetzt außerdem noch die IP des Users ins (vielleicht) EU-Ausland. Dafür müssen Sie nur drei Zeilen in den <head> einbinden. Das spart wiederum Zeit bei der Erstellung.

Erst das fertige Endergebnis anzeigen lassen

Wenn man dem CSS nicht explizit definiert, wie die Webseite sich beim Laden verhalten soll, entscheidet sich der Browser im Zweifel für einen unsichtbaren Text. Im CSS verzichten wir also auf font-display: swap und machen den Text auf der Website so lange unsichtbar, bis die Schrift vollständig geladen ist.

Jetzt kennen Sie die Geheimnisse unserer Mitbewerber und sind bereit, eine eigene Website zu bauen.