GRÜNCODE

SPARBUCHstaben!

— 3 Minuten Lesezeit — von Henning Ein Blogbeitrag aus der Rubrik "Reduzieren"

Betrachten wir die Font-Stacks in unseren Websites. Diese bieten einen idealen Ansatzpunkt, um den unnötigen Transfer von Bits und Bytes und damit einhergehend auch den Energieverbrauch unserer Websites zu reduzieren. Fonts sind des Designers Lieblinge. Designer lieben Typografie - wir alle lieben Typografie (danke Peppa Wutz ...). Aber warum müssen gleich alle 50 erhältlichen Schriftschnitte in unserer Website referenziert werden, wenn wir doch nur Regular und Bold brauchen? Auch Dynamik-Fonts sind da nicht die Lösung, sondern eher der Beginn eines neuen Rebound-Effekts.

Überlassen wir die Typografie doch den Betriebssystemen. Deren Designer haben die schönsten Fonts für die Anzeigen in den jeweiligen Systemen bereits für uns ausgesucht - von San Francisco bis Roboto. Diese Fonts kann man sich einfach ausleihen mit dem sog. System Font Stack:

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

Jonathan Neal bietet eine alternative Methode an, bei der Systemschriftarten mit @font-face deklariert werden.

/* Define the "system" font family */
@font-face {
font-family: system;
font-style: normal;
font-weight: 300;
src: local(".SFNSText-Light"),
local(".HelveticaNeueDeskInterface-Light"),
local(".LucidaGrandeUI"),
local("Ubuntu Light"),
local("Segoe UI Light"),
local("Roboto-Light"),
local("DroidSans"),
local("Tahoma");
}

/* Now, let's apply it on an element */
body {
font-family: "system";
}

Da ist nun wirklich für jeden etwas dabei. Tolle Fonts erhalten und gleichzeitig noch die Performance steigern. Und wenn es denn mal unbedingt etwas anderes sein muss, finden sich in dem Artikel Performant Web Fonts von Joshua Stopper ein paar gute Tipps, wie sich mit Custom Web Fonts Ressourcen sparen lassen.