In Shopware 5 können wir natürlich auch eigene Web Fonts nutzen.
Dazu müssen wir erst einmal wie immer ein eigenes Theme anlegen.

Innerhalb unseres src Verzeichnisses kopieren wir unseren fonts Ordner mit den darin liegenden Web Font Dateien.

Ordner Struktur

webfonts

Web Font LESS Datei

Nun müssen wir die Web Font noch entsprechend in unsere LESS Dateien einfügen. Hierfür erstellen wir uns eine eigene LESS Datei, bspw. mit dem Namen webfonts.less in _public/src/less/_modules

In diese LESS Datei fügen wir unseren CSS Code ein. Bspw:

@font-face {
font-family: 'Oswald';
src: url('../../fonts/Oswald.eot');
src: url('../../fonts/Oswald.eot?#iefix') format('embedded-opentype'),
url('../../fonts/Oswald.woff2') format('woff2'),
url('../../fonts/Oswald.woff') format('woff'),
url('../../fonts/Oswald.ttf') format('truetype');
}

Achtet hier auf das doppelte zurück gehen mittels ../../, da die Web Fonts zwei Ebenen unterhalb unserer webfont.less LESS Datei liegen.

Nachdem wir diese Datei gespeichert haben, müssen wir unsere neu erstellte webfonts.less noch in unsere all.less einbinden, damit diese auch geladen wird.
Shopware 5 sucht automatisch nach der all.less Datei, diese wiederum beinhaltet alle weiteren nötigen LESS Dateien.
Öffnet eure all.less in _public/src/less und fügt hier folgenden Code ein:

@import "_modules/webfonts";
Falls die Datei all.less noch nicht existiert, legt diese an.

Shopware Backend

Nun da wir alle nötigen Dateien eingebunden haben, müssen wir Shopware zu guter letzt noch mitteilen, dass unsere neue Font geladen wird. Dazu gehen wir im Shopware Backend im Theme Manager in die Theme Konfiguration und dann auf den Tab Typografie.

Theme Manager
thememanager
Typografie
font

In den Typografie Einstellungen ändern wir hier den Font Stack welcher geladen wird. Löscht hier die Font Open Sans und fügt die neue Font „Oswald“ ein.

Leert danach den Shopware als auch Browser Cache.

MyFonts und andere Dritt Anbieter

Bei manchen Web Fonts Anbietern müsst Ihr einen zusätzlichen „Verifizierungs“ Code einfügen, damit eure Web Fonts Dateien auch entsprechend geladen werden.

Solltet Ihr so einen haben, fügt diesen oberhalb eurer Web Fonts Anweisungen in euer webfonts.less ein.
Achtet hierbei darauf, dass Ihr hinter dem @import ein (css) setzt.

@import (css) url("//hello.myfonts.net/count/xxxxx");
Shopware Onlinekurs Jetzt kostenlos anmelden.