Mein erster onlineshop
mit shopware 5
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
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/
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"
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;
}
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
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:
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.
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.
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"
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;
}
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
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.
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.
Unsere Standorte
Zentrale
Technologiepark 23
33100 Paderborn
Leipzig
Bernhardstraße 34
04315 Leipzig
Kontakt
E-Mail: support@8mylez.com
Telefon: +49 (0) 5251 284 710
Shopware Dienstleistungen
Ü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
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!
Danke, dass wuenschen wir auch :) Wir versuchen in Zukunft wieder mehr zu bloggen!
Gruss
Alexander
Was denkst du?