WebFonts und wie diese optimiert werden können

WebFonts und wie diese optimiert werden können

Daniel Wolf 26. Oktober 2021 2

Webfonts haben die negative Eigenschaft, dass sie, wenn sie nicht geladen werden, den Google Page Speed negativ beeinflussen. Hauptsächlich werden durch "Nichtladen", falsches Laden oder zu langsames Laden von Fonts das FCP und LCP beeinflusst. Außerdem kann der Wechsel der Fonts zu Verschiebungen im Layout führen, welche, wenn sie häufig genug und in einem kurzen Abstand stattfinden, das CLS bedingen können.

Potenzielle Lösungsansätze lmöchte ich dir deshalb in diesem Beitrag vorstellen. Du kannst die Definitionen oder andere wichtige Informationen in Bezug auf die zu verwendenden Schriftarten direkt mit in den <head> der einzelnen Seiten einpflegen.

Zusätzlich sollte versucht werden, Schriftarten, die von Drittanbietern geliefert und eingesetzt werden, direkt zu verknüpfen. Es sollte mit dem Ressource Hint “preconnect” gearbeitet werden. Einhergehen damit sollte vermieden werden, den Hint “preload” zu nutzen. Dieser sorgt dafür, dass Schriftarten vorgeladen werden, obwohl diese möglicherweise gar nicht notwendig sind. Dieses Vorgehen kostet den Browser unnötige Ressourcen und verringert somit eher die Performance als das sie gesteigert wird.

All diese Integrationen können umgangen werden, wenn keine WebFonts, sondern SystemFonts genutzt werden. Diese sind abhängig vom genutzten System bereits installiert und müssen nicht extra heruntergeladen werden.

Es sollte außerdem ein großes Augenmerk darauf gelegt werden, eine sinnvolle Font-Display-Strategie zu nutzen. Wie soll damit umgegangen werden, wenn die Schriftart die gefordert und vorgegeben ist nicht zur Verfügung steht? Soll eine andere Schriftart genutzt werden und später auf die vorgesehene zurückgegriffen werden? Dies muss definiert werden und hat einen maßgeblichen Einfluss auf LCP, FCP und auch die Layout-Shifts.

Grundsätzlich lässt sich sagen, dass es zwei Möglichkeiten gibt die Strategie zu wählen. Soll eine gute Performance erzielt werden oder soll die Seite möglichst akkurat dargestellt werden.

performance: font-display: optional

beautiful: font-display: swap


Fonts einbinden (Best Practice - Shopware 5)

Wenn man seinen Shop mit einer neuen Schriftart schmücken will, kann man dies mit simplen Schritten (sofern man schon Erfahrungen bei der Theme Entwicklungen sammeln durfte) umsetzen.

Als Erstes ist es wichtig, dass man ein eigenes Theme anlegt, um dort seine Änderungen zu hinterlegen.

Dieses Thema haben wir bereits in diesem Blogbeitrag erklärt:

https://www.8mylez.com/blog/shopware-5-theme-erstellen/


Shopware 5

Sobald wir ein eigenes Theme erzeugt haben, ist es wichtig, dass wir die Hauptdatei für die LESS (bzw. CSS)-Anpassungen erzeugen: die all.less

Diese Datei landet dann relativ zum Themepfad ins Verzeichnis:

THEME/frontend/_public/src/less/all.less

In dieser Datei verlinken wir Ruckzuck die Datei fonts.less, welche wir in einem der nächsten Schritte auch gleich anlegen werden, mit folgendem Code in der Datei all.less :

@import "_modules/fonts"


Schriftart-Dateien

Wenn wir Schriftarten aus bestimmten Ressourcen beziehen, erhalten wir mehrere Dateien (Varianten) einer Schriftart.

Diese Varianten werden, je nach Design, auch im Theme benötigt, daher laden wir den gesamten Ordner ins Theme ins folgende Verzeichnis:

THEME/frontend/_public/src/fonts/SCHRIFTART

Da wir nun die Verlinkung in der all.less -Datei gesetzt haben, können wir diese Datei auch im Pfad THEME/frontend/_public/src/less/_modules/fonts.less anlegen.

@font-face

Jetzt kommen wir zum Main-Part unserer gewünschten Anpassung.

Wir legen pro Schriftart-Datei folgenden Eintrag in der fonts.less -Datei an:

@font-face {

font-family: 'SCHRIFTART';

src: url('../../fonts/SCHRIFTART/SCHRIFTART.ttf') format('truetype'); font-display: swap;

}


Variationen

Wenn ihr verschiedene Variationen einer Schriftart haben wollt bzw. nutzt (z.B. die Schrift dicke oder kursiv), könnt ihr diese, wie oben im letzten Codebeispiel, auf eure Website einbinden.

Wenn ihr eine kursive (auch Italic genannt) Variante habt, dann könnt ihr diese mit folgenden Codeblock einbinden:

@font-face {

font-family: 'SCHRIFTART';

src: url('../../fonts/SCHRIFTART/SCHRIFTART-Italic.ttf') format('truetype'); font-style: italic;

font-display: swap;

}

Hier ist der Zusatz font-style: italic; wichtig.

Wenn ihr dann noch verschiedene Schrift dicken habt (auch genannt Thin , Light , Regular , Medium , Bold oder Black ), könnt ihr für jede einzelne Schrift dicke auch diese hinterlegen:

@font-face {

font-family: 'SCHRIFTART';

src: url('../../fonts/SCHRIFTART/SCHRIFTART-Bold.ttf') format('truetype'); font-weight: 900;

font-display: swap;

}

Hier ist der Zusatz font-weight: 900; wichtig. Der Wert geht von 100 bis 900 in 100er-Schritten. 500 : normale Dicke; < 500 : dünne Schriftart; > 500 : dicke Schriftart


Neue Schriftart nutzen

Als Hauptschriftart:

Wenn im Design die Schriftart überall genutzt wird, können wir diese auch mit einer einfachen Einstellung nutzen.

Folgende Einstellung muss nun angepasst werden:

Wir gehen ins Backend und öffnen den Theme-Manager. Wir öffnen die Konfiguration unseres Themes und öffnen folgendes Tabs: Farb-Konfiguration → Typografie. Dort ergänzen wir den Wert für die Variable @font-base-stack mit dem Namen unserer neuen Schriftart. Die Schriftart setzen wir am Anfang wie folgt:


Einzelne Theme-Elemente

Jetzt wo wir unsere neue Schriftart eingebunden haben, können wir diese auch im Theme ohne Einschränkung nutzen.

Wir wählen unser gewünschtes Element mit einem Selektor aus, z.B. .emz-header--text um dort die Eigenschaft font-family zu setzen. Das Ganze würde wie folgt aussehen:

.emz-header--text {

font-family: 'SCHRIFTART';

}

Bei einer Variation fügen wir zusätzlich die Eigenschaft font-weight , oder font-style hinzu.


Optional: Preload

Wir können das Laden unsere Schriftarten auf Kunden-PCs auch etwas optimieren. Hier nimmt das folgende Plugin aus dem Shopware-Store die Arbeit ab:

https://store.shopware.com/tanma71112868771/pagespeed-preload-optimierung-wichtige-anforderungen-vorab-laden.html

Dieses Plugin durchleuchtet alle implementierten Plugins nach Schriftarten und ergänzt die Website automatisch mit sog. preload-Tags.

Diese sagen dem Kunden-Browser welche Ressourcen schon vorab geladen werden können, damit der Kunde ein optimales Erlebnis beim Besuch des Webshops hat.


Fonts einbinden (Best Practice - Shopware 6)

Sobald wir ein eigenes Theme erzeugt haben, ist es wichtig, dass wir die Hauptdatei für die SCSS (bzw. CSS)-Anpassungen erzeugen: die base.scss

Diese Datei landet dann relativ zum Themepfad ins Verzeichnis: THEME/src/Resources/app/storefront/src/base.scss

In diesem Verzeichnis legen wir zusätzlich einen neuen Ordner mit dem Namen fonts an.

In der base.scss Datei verlinken wir die einzelnen SCSS-Datei(en) _fontname.scss , welche wir in einem der nächsten Schritte auch gleich anlegen werden, mit

folgenden Code in der Datei base.scss :

@import "fonts/fontname"


Schriftart-Dateien

Wenn wir Schriftarten aus bestimmten Ressourcen beziehen, erhalten wir mehrere Dateien (Varianten) einer Schriftart. Diese Varianten werden, je nach Design, auch

im Theme benötigt, daher laden wir den gesamten Ordner ins Theme ins folgende Verzeichnis: THEME/src/Resources/public/fonts/SCHRIFTART

Beispiel dieser Ordner-Struktur:

~THEME/src/Resources/public/fonts/Roboto

~THEME/src/Resources/public/fonts/Roboto/Roboto-Bold.tff

~THEME/src/Resources/public/fonts/Roboto/Roboto-Medium.tff

~THEME/src/Resources/public/fonts/Roboto/Roboto-Regular.tff

@font-face

Jetzt kommen wir zum Main-Part unserer gewünschten Anpassung. Wir legen pro Schriftart eine SCSS-Datei unter

THEME/src/Resources/app/storefront/src/fonts/ an.

Beispiel: THEME/src/Resources/app/storefront/src/fonts/_roboto.scss

Diese Datei enthält dann unsere font-faces:

@font-face {

font-family: 'SCHRIFTART';

src: url('#{$sw-asset-public-url}/bundles/THEME/fonts/SCHRIFTART/SCHRIFTART.ttf') format('truetype');

font-display: swap;

}


Variationen

Wenn ihr verschiedene Variationen einer Schriftart haben wollt bzw. nutzt (z.B. die Schriftdicke oder Kursiv), könnt ihr diese, wie oben im letzten Codebeispiel, auf eure

Website einbinden. Wenn ihr eine kursive (auch Italic genannt) Variante habt, dann könnt ihr diese mit folgenden Codeblock einbinden:

@font-face {

font-family: 'SCHRIFTART';

src: url('#{$sw-asset-public-url}/bundles/THEME/fonts/SCHRIFTART/SCHRIFTART-Italic.ttf') format('truetype');

font-style: italic;

font-display: swap;

}

Hier ist der Zusatz font-style: italic; wichtig.

Wenn ihr dann noch verschiedene Schriftdicken habt (auch genannt Thin , Light , Regular , Medium , Bold oder Black ), könnt ihr für jede einzelne Schrift dicke

auch diese hinterlegen:

@font-face {

font-family: 'SCHRIFTART';

src: url('#{$sw-asset-public-url}/bundles/THEME/fonts/SCHRIFTART/SCHRIFTART-Bold.ttf') format('truetype');

font-weight: 900;

font-display: swap;

}

Hier ist der Zusatz font-weight: 900; wichtig. Der Wert geht von 100 bis 900 in 100er-Schritten. 500 : normale Dicke; < 500 : dünne Schriftart; > 500 : dicke Schriftart


Neue Schriftart nutzen

Als Hauptschriftart

Wenn im Design die Schriftart überall genutzt wird, können wir diese auch mit einer einfachen Einstellung nutzen. Folgende Einstellung muss nun angepasst werden:

Wir gehen in die Administration und öffnen den betreffenden Saleschannel. Dort wählen wir den Tab Theme aus und klicken auf den Button Theme bearbeiten unseres

Themes. Nun öffnet sich die Konfiguration unseres Themes und wir wählen den Tab: Allgemein → Typografie aus. Dort ergänzen wir den Wert für die Variablen

Schriftart Text und Schriftart Überschrift mit dem Namen unserer neuen Schriftart. Die neue Schriftart setzen wir an den Anfang.


Einzelne Theme-Elemente

Jetzt wo wir unsere neue Schriftart eingebunden haben, können wir diese auch im Theme ohne Einschränkung nutzen. Wir wählen unser gewünschtes Element mit

Einem Selektor aus, z.B. .emz-header--text um dort die Eigenschaft font-family zu setzen. Das Ganze würde wie folgt aussehen:

.emz-header--text {

font-family: 'SCHRIFTART';

}

Bei einer Variation fügen wir zusätzlich die Eigenschaft font-weight , oder font-style hinzu.

2 Kommentare

  • Lieber Daniel,

    sehr schade, dass dies hier euer letzter Blogbeitrag war. Ich habe eure sehr guten Tipps jedenfalls immer gerne verfolgt. Oder habe ich irgendwas übersehen?

    Ich wünsche euch ein frohes Weihnachtsfest und einen guten Rutsch ins neue Jahr!
  • Hey Christian,

    Danke, dass wuenschen wir auch :) Wir versuchen in Zukunft wieder mehr zu bloggen!

    Gruss
    Alexander

Was denkst du?

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Social Media Icon mit Link im Footer
Shopware Theme: Eigenes Listing Layout erstellen
Logo Größe mit Less für Shopware 5 anpassen
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes

Sicher Dir die besten Shopware 6
Tipps & Tricks

Trag Dich ein und Du erhältst unser Shopware 6 Whitepaper kostenlos!
Trag dich für unseren Newsletter an, im Anschluss erhältst Du das Whitepaper. 

Mit dem Abschicken Deiner Daten akzeptierst Du unsere Datenschutzerklärung.

Entdecke unsere ebooks

Unsere Standorte

Zentrale 

Technologiepark 23
33100 Paderborn


Leipzig
Bernhardstraße 34
04315 Leipzig

Kontakt

Über 8mylez

✓ 38 Mitarbeiter

✓ Shopware Gold Partner

✓ 40.000+ Plugin Downloads

✓ 160+ betreute Shops

✓ Full-Service Shopware Agentur

✓ 70 Shopware Videos auf Youtube

✓ Alle Shopware Zertifizierungen

Social


Unsere Partner
© 2024 by 8mylez GmbH //  Impressum + Datenschutz