Wechsel zu einem Systemfont-Stack in WordPress (wie und warum)

Ich bin ein großer Fan von Web-Performance. Aber ich denke auch nicht, dass es beim Design Kompromisse machen sollte oder muss. Es gibt immer eine gute Balance in der Mitte. Im Jahr 2017 war ich auf dem Blog von GitHub und habe ihre Schriftart ausgegraben. Es war super einfach zu lesen. Also habe ich mich mit Chrome Devtools in die Eigenschaften gegraben und gesehen, dass sie einen Systemfont-Stack verwenden .

Ich verwende seit Jahren Systemschriften und liebe sie. Deshalb möchte ich dir heute zeigen, wie du einen Systemfont-Stack auf deiner WordPress-Seite verwendest.

Was ist ein Systemfont-Stack?

Für eine Website stehen verschiedene Schriftarten zur Auswahl. Sie haben so ziemlich vier verschiedene Möglichkeiten:

• Websichere Schriftarten: Kostenlos und keine Downloadzeit durch den Browser erforderlich, sehen aber normalerweise veraltet aus und werden daher nicht häufig verwendet. Niemand mag wirklich Arial oder Tahoma, oder? Sehen Sie sich eine vollständige Liste websicherer Schriftarten an.
• Webfonts: Sehen schön aus, müssen aber vom Browser heruntergeladen werden. Haben Sie sowohl kostenlose als auch Premium-Optionen zur Verfügung. Trägt zum Gesamtseitengewicht Ihrer Website bei. Sie können jedoch von einem zwischengespeicherten CDN bereitgestellt werden. Zu den Anbietern gehören Google, Adobe Fonts (TypeKit) usw.
• Webfonts lokal hosten: Sowohl kostenlose als auch Premium-Optionen sind verfügbar. Es erfordert immer noch Downloadzeit und kann eine einzelne HTTP/2-Verbindung auf einem zwischengespeicherten CDN nutzen. Alle gängigen Browser verfügen jetzt über eine separate Cache-Partitionierung, sodass das lokale Hosten für die Leistung tatsächlich besser ist. Mit Perfmatters können Sie Ihre Google-Schriftarten lokal hosten.
• Systemschriftarten: Kostenlos, sehen verdammt gut aus, da sie zum Betriebssystem passen, und keine Downloadzeit erforderlich! Sie werden von Weather.com, GitHub, Bootstrap, Medium, Ghost, Booking.com (lesen Sie die Geschichte der Systemschriftarten), PubMed und sogar Ihrem WordPress-Dashboard verwendet. Meiner persönlichen Meinung nach sehen Systemschriftarten unter macOS etwas besser aus als unter Windows.

Systemschriften sind nichts Neues. Tatsächlich hat Medium sie 2015 verwendet. Sie fühlen sich genau wie Ihr Betriebssystem an , weil sie native Schriftarten verwenden. Viele moderne Betriebssysteme wählen Schriftarten sehr klug aus, und alle haben ein sehr elegantes Erscheinungsbild. Es ist nicht so, als würde man standardmäßig auf eine websichere Schriftart wie Arial oder Times New Roman zurückgreifen. Vertrau mir; Niemand möchte Times New Roman auf einer Website sehen.

Und das Beste daran: Systemschriftarten funktionieren genauso wie websichere Schriftarten, da sie keine Downloadzeit durch den Browser erfordern. Dies kann dazu beitragen, die Gesamtgewichtung der Seite auf Ihrer Website zu reduzieren. Ab April 2022 machen Webfonts im Durchschnitt etwa 6,07 % des Gewichts einer gesamten Website aus. Dies ist zwar nicht sehr groß, aber denken Sie daran, dass jede kleine Optimierung, die Sie vornehmen, zu einer schnellen Website beiträgt, insbesondere auf Mobilgeräten.

Gibt es Nachteile bei der Verwendung von Systemschriften? Nein! Das ist das Schöne daran. Warnungen in PageSpeed ​​Insights wie „Stellen Sie sicher, dass der Text während des Ladens von Schriftarten sichtbar bleibt“ kommen nie ins Spiel, da technisch gesehen nichts heruntergeladen wird.

Systemfont-Stack CSS

Mit der Font-Family-Eigenschaft mit Webfonts haben Sie normalerweise Ihre primäre Schriftart und ein oder zwei Fallback-Schriftarten. Bei Systemschriftarten müssen Sie alle verschiedenen Betriebssysteme einbeziehen, und daher müssen Sie einige weitere Schriftarten stapeln. Aus diesem Grund wird es als „Systemfont-Stack“ bezeichnet.

Hier sehen Sie beispielsweise, wie CSS mit einer Webschriftart aussehen könnte.

 Schriftfamilie: „Open Sans“, „Helvetica Neue“, serifenlos;

Und so könnte ein Systemfont-Stack aussehen. Die gute Nachricht ist, dass nicht alle geladen werden; Es ist nur eine Reihenfolge, welche Schriftarten vom Betriebssystem geladen werden sollen, wenn sie verfügbar sind.

 Schriftfamilie: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, serifenlos, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

Wussten Sie, dass Ihr WordPress-Dashboard einen Systemfont-Stack verwendet? Hier ist, was sie verwenden.

 Schriftfamilie: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif

CSS-Tricks hat auch eine alternative Methode zum Anwenden von Systemschriften mit @font-face.

Cheatsheet zum Stapeln von Systemschriften

Hier müssen Sie auswählen, welches Setup Sie möchten. Hier ist eine Liste, welche Schriftarten für jedes Betriebssystem geeignet sind. Hinweis: Dies ändert sich im Laufe der Zeit, sodass Sie Ihre Schriftarten möglicherweise erneut überprüfen müssen, wenn neue Betriebssysteme auftauchen. Ich werde dafür sorgen, dass diese Liste aktualisiert wird.

So implementieren Sie einen Systemfont-Stack

Ich verwende einen Systemfont-Stack hier auf woorkup.com und auf allen meinen anderen Websites. Ich habe das Gefühl, endlich das Beste aus beiden Welten gefunden zu haben. Und so habe ich es gemacht.

Option 1: Verwenden Sie das GeneratePress-WordPress-Theme

Willst du es super einfach machen? Wechseln Sie einfach zum GeneratePress-Theme, das ich auf allen meinen Websites verwende. Im Customizer kannst du unter Typografie einfach „System Stack“ auswählen. Und das ist es!

Andere leistungsorientierte Themen wie Astra haben auch die Möglichkeit, Systemschriftarten zu verwenden.

Option 2: Systemfont-Stack mit CSS hinzufügen

Wenn Sie ein anderes WordPress-Theme verwenden, können Sie mit ein wenig CSS problemlos zu einem System-Font-Stack wechseln.

Schritt 1

In WordPress müssen Sie das CSS Ihrer font-family ändern. Sie können den WordPress-Customizer verwenden, um den Code unter „Zusätzliches CSS“ hinzuzufügen.

Schritt 2

Geben Sie den folgenden Code ein. Dies kann je nach Thema variieren, aber für die meisten sollte das Folgende alles außer Kraft setzen. Ich verwende denselben Systemfont-Stack wie GithHub, außer dass ich system-ui hinzufüge, da neuere Versionen von Chrome dies unterstützen. Denken Sie daran, dass sie in der Reihenfolge verwendet werden, in der sie im Stapel erscheinen.

 body {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, serifenlos, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
h1,h2,h3,h4,h5,h6 {font-family:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, serifenlos, "Apple Color Emoji", "Segoe UI Emoji ", "Segoe-UI-Symbol";}

Abhängig von Ihrem Thema müssen Sie möglicherweise Absatz-Tags für den Textkörper hinzufügen. Also das wäre:

 body, p {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, serifenlos, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }

Schritt 3

Sie sollten auch alle Schriftarten von Drittanbietern wie Google Fonts deaktivieren, die Sie aus Ihrem WordPress-Theme geladen haben. Dies kann wiederum variieren, da jeder Entwickler Schriftarten anders einbindet. Aber viele Themen haben jetzt eine einfache Möglichkeit, Google Fonts ein- oder auszuschalten.

Wenn Sie eines der Standard-WordPress-Themes verwenden, können Sie ganz einfach das kostenlose Plugin Google Fonts deaktivieren verwenden. Oder Sie können Google Fonts auch in unserem Perfmatters-Plugin deaktivieren.

Vor und nach Speedtests

Und natürlich konnte ich nicht widerstehen. Hier sind Vorher-Nachher-Geschwindigkeitstests. Jeder Test wurde fünfmal durchgeführt, und es wurde ein Durchschnitt genommen.

Speedtest vorher

Hier ist der Geschwindigkeitstest zuvor, als ich Google-Schriftarten geladen hatte.

Speedtest danach

Hier ist der Geschwindigkeitstest nach der Verwendung meines Systemfont-Stacks. Wie Sie sehen können, habe ich mein gesamtes Seitengewicht um etwa 60 KB gesenkt und drei Anfragen losgeworden. Einer zu fonts.googleapis.com und dann zwei Downloads für Roboto-Versionen mit unterschiedlichen Schriftarten. Der Systemfont-Stack war etwa 6 % schneller als die Verwendung von Google-Fonts .

Ich kenne viele Websites, die 4-5 verschiedene Schriftstärken oder -stile und manchmal sogar 2-3 verschiedene Google-Schriftarten verwenden. Sie könnten also möglicherweise noch bedeutendere Verbesserungen sehen als selbst ich.

Ich habe auch unsere WordPress-Site novashare.io auf Systemschriftarten umgestellt und großartige Ergebnisse erzielt. Sehen Sie sich diesen Geschwindigkeitstest unten an.

Schriftglättung

Die Schriftglättung hängt von den persönlichen Vorlieben ab. Wenn Sie Antialiasing anwenden, wird Ihre Schrift etwas dünner und heller. Ich verwende es auf dieser Seite nicht, da ich die etwas dickere Schrift bevorzuge; Ich finde, es fühlt sich etwas wärmer an. Aber Sie können mit beiden experimentieren, um zu sehen, welche Ihnen gefällt.

Sie können dies dem Körper hinzufügen.

 Karosserie {
-Webkit-Schriftglättung: Antialiasing;
-moz-osx-font-smoothing: Graustufen;
}

Zusammenfassung

Systemschriftarten können eine großartige Alternative zu Webschriftarten und websicheren Schriftarten sein. Ich mag das Aussehen meiner Schriftart immer noch sehr und weiß jetzt, dass sie den Benutzern keine Last verursacht. Auch wenn Google-Schriftarten lokal gehostet werden können, sind sie dennoch Teil der Gesamtgewichtung der Seite.

Neugierig, was Ihre Gedanken sind? Hast du schon einen System-Font-Stack mit WordPress verwendet? Wenn ja, lassen Sie es mich unten wissen.