Das Kreuz mit den Schriften im Web

Regel :
Benutze web safe-Fonts bzw. websichere Schriften!

Natürlich! Logisch! Nichts besser als Websafe Fonts. aber wie eigentlich?

Erkenntnis:
Es gibt kaum noch Websafe-Fonts!

web safe fonts schriften im web

Wir haben doch Google Fonts!

Natürlich. Das Erscheinen der Google Fonts war auf den ersten Blick ein Segen für die Branche. Endlich eine komplette Bibliothekt unter Open Source Lizenz, wo Designer aus dem Vollem schöpfen können. Die Zeiten der Abmahnungen wegen nicht korrekt lizensierter Schriftarten auf einer Webseite schienen vorbei. Auch konnte die Standard-Schriftat Arial wirklich niemand mehr sehen. Daran hat sich bis heute wenig geändert. Aber: wo viel Licht, da auch viel Schatten.

Und dabei reden wir noch gar nicht von dem Layout-Desaster, wenn man Laien eine unüberschaubare Zahl von Optionen an die Hand gibt. 

Google Fonts: Eine Hassliebe

The inaccurate Web Font defense:
“Without Google Fonts we’re limited to a handful of system fonts installed on our user’s device.”

Mehr als die Hälfte der TOP  1 Million Websites verwenden Google Fonts. Dies ist aber nicht die beste Vorgehensweise für mobile Geschwindigkeit. Es ist sogar massiv hinderlich, wenn man seine Seite auf schnelle Ladezeiten optimieren will. Google Fonts kosten Ladezeit. Jede Schriftart hat eine Gewichtung, die der Webbrowser vor der Anzeige herunterladen muss. Im schlimmsten Fall warten Benutzer Sekunden. Das sollte Grund genug sein, Google Fonts nicht zu verwenden. Verursachen Google Fonts jedes Mal Verzögerungen oder Fehler? Nein, nur manchmal. Warum? Weil sie von Remote-Servern gehostet werden und Millionen von API-Treffern gleichzeitig erhalten. Google behauptet zwar, die Fonts wären bis zu 4 Wochen im Cache der Benutzer-Browser. De facto aber nicht länger als 24h “um updatesicher zu bleiben”. Genau genommen praktiziert Google das Gegenteil dieser Behauptung, denn jeder Abruf eines Fonts ist ein Ping an Google, bei dem auch Benutzerdaten gesammelt werden. Data is the new Oil! Nette Ausreden wie “…. erfolgt ausschließlich anonym” o.ä. kann man getrost in die Tonne treten. Jeder, der sich einmal mit Googles Datensammlung beschäftigt hat, wird vom Gegenteil ausgehen. Und zu Recht.

Weiter: Jede Schriftart kann bis zu 400 Kilobyte zum Seitengewicht hinzufügen. Multiplizieren Sie dies mit ein paar verschiedenen Schriftfamilien und Schriftarten, die mehr wiegen als Ihre gesamte 2- bis 3-Megabyte-Seite und der Horror hat einen Namen. 

All dies ist bei websicheren Systemschriften kein Problem. Sie haben eine sofortige Ladezeit. Null Sekunden – Nessuno – nothing……..Absolut kein Seitengewicht.

Vergiß Google Fonts!

Noch schlimmer sieht es übrigens (aus technischer Sicht) mit Type-Kit von Adobe aus. Schlechteste Ladezeiten und ordentlich Datenabruf von externen Servern. So verlockend solch eine global lizensierte, riesige Bibliothek auch sein mag: ich behaupte einmal, daß über 80% der Webseiten komplett ohne fancy Spezial-Schrift auskommen. Und dabei reden wir noch gar nicht vom Spezialproblem DSGVO.  Wenn auch die Meinungen zu Google-Fonts im Zusammenhang mit der DSGVO weit auseinander gehen – kein Risiko ist natürlich immer besser als ein geringes Risiko…….

Also gut.... Und was ist mit web safe Schriften?

Was sind websichere Schriften? 

Kurz: Schriftarten, die auf jedem System installiert sind und nicht von irgendwoher geladen werden müssen. Quasi der kleinste gemeinsame Nenner. Schriften, von denen man annehmen kann, daß sie überall vorhanden und gleich dargestellt werden. Vor 10 Jahren war das mehr oder weniger Arial. Das würde auch heute noch funktionieren, aber wer will denn schon eine Arial sehen :-) Und wozu überhaupt websichere Schriftarten, wenn wir doch aus dem Vollen schöpfen können mit Webfonts? Siehe oben: Speed, Speed und noch einmal Speed. Das ist nicht nur benutzerfreundlich (gerade auf Mobilgeräten) sondern auch ein wichtiger Aspekt im sg. “technical SEO”.  Ladezeiten haben einen massiven Einfluss auf die Bewertung durch Google, was wiederum das Ranking beeinflußt. Ich halte auch nichts davon, Google Schriften herunter zu laden und (lokal abgelegt) einzubinden. Damit beginnt das Lizenz-Problem von vorn -> genau dieses sollten Webfonts ursprünglich lösen (unter Anderem).

Jeder kocht seine eigene Suppe

Wer hält sich nicht an globale Standards bei Browser-Technologien? Genau: Internet Explorer und Edge. Also wieder einmal Microsoft. Die beliebte Schrift Helvetica sucht man auf Windows Systemen so auch meist vergebens. Das wäre ja auch zu einfach….. Was viele für Arroganz halten ist wohl eher der Idee von Dominanz oder irgendeinem Marketing geschuldet. Ist nervig, aber damit muss man leben. Auch im Punkt Schriftarten kocht jeder seine eigene Suppe. Eine genaue Übersicht über Systemschriftarten findet sich hier: cssfontstack.com.

Wir sehen: es finden sich im Standard bei Windows die Schrift Segoe UI oder auf Mac OS und iOS San Franciso. Mit beiden Schriften kann man im Prinzip gut leben. Sie sind modern und gut lesbar. Dieser Artikel z.B. bedient sich der Systemschrift Ihres Systems. Und? Zufrieden so weit?  :-)  Ein netter Nebeneffekt der Einbindung von Systemschriften: die Webseite fühlt sich auf dem Monitor nicht an wie ein Fremdkörper für den Besucher durch ein Spezial-Layout sondern integriert sich optisch in das Erscheinungsbild des Gerätes des jeweiligen Besuchers. Psychologie ist ja auch ein Faktor im Webdesign.

Ein Spezial-Desaster stellt übrigens Android dar. Da findet sich keine der sonst üblichen Schriften. Diesem Problem hat man sich auf stackoverflow angenommen und kann sich schlau machen, wie man das löst.

Also wie jetzt?

“Soll ich mir das alles wirklich antun?  Natürlich! Denn alle bekannten Tricks für Caching von externen Ressourcen wie DNS-prefetch oder preload etc. sind immer nachteilig im Vergleich zu Systemfonts. Was nicht geladen werden muss, das muss auch nicht in den Cache. Allerdings sind sehr viele der verfügbaren Informationen zur Einbindung von Systemfonts entweder veraltet oder erzeugen mehr Probleme, als sie lösen sollten. Der einzige, gangbare Weg läuft über eine globale CSS-Regel und sieht so aus:
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

Wer, so wie ich, eine Allergie gegen Arial hat, der nimmt sie aus der Regel heraus oder ersetzt sie mit einem anderen Liebling.

Ein ganzer Artikel bei CSS TRICKS beschäftigt sich mit dem Problem OS Specific Fonts in CSS.  Eine Lektüre, die ich herzlich empfehlen kann.

Happy coding :-)

Du brauchst hilfe zum Thema? Schreib mir....

Verwandte Artikel

woocommerce logo
WordPress

Eigenes Datenfeld in Woocommerce

Worum gehts? Der Kunde möchte noch zusätzliche, nicht im Standard enthaltene, Felder in der  WooCommerce Produktseite ausgeben. Im konkreten Fall sollte das die Füllmenge der Flaschen sein. Welche Felder könnten das sein? Text

Weiter lesen »

Teilen

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Steffen Rössler

Steffen Rössler

Diplom-Webdesigner | dreifacher Vater | Klassik-Liebhaber | Schnellleser | UmDieEcke-Denker. Lebt und arbeitet in Braunau a. Inn

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Scroll to Top