Schriften lokal einbinden mit Child-Theme

Diese Anleitung kann für Google Fonts und andere eigene Schriften genutzt werden.

Diese Anleitung setzt die Verwendung eines Child-Themes voraus.

Solltest Du kein Child-Theme einsetzen können, verwende die allgemeine Anleitung.

Google Fonts lokal einbinden

Anstatt die Schriften vom Google Server zu laden, kannst Du diese auch lokal auf dem eigenen Server ablegen und einbinden. Du kannst diese Anleitung auch nutzen, um eigene Schriften in Deinen Shop einzubinden.

1. Schrift aussuchen

Um die Schriften als Webfonts von Google Fonts herunterladen zu können, kannst Du den kostenlosen Dienst von Herokuapp nutzen.

google webfonts helper

Gib den Namen der gewünschten Schriftart (in diesem Beispiel ist es Raleway) in der Suche (1) ein, und wähle die Schriftart aus den Vorschlägen (2) aus.

Die Schriftschnitte (3) der Schriftart kannst Du daraufhin anhaken.

2. CSS einfügen

Per CSS/SCSS definierst Du, welche Schriften das Theme laden soll.

Pfade anpassen

Shopware 6.5

Bevor Du den Code kopierst, passe die Pfade der Url von ../font/ auf #{$app-css-relative-asset-path}/font/ an. Dazu kannst Du direkt im Screenshot markierten Eingabefeld (1) den Pfad ganz einfach umschreiben.

Shopware 6.4

Bevor Du den Code kopierst, passe die Pfade der Url von ../font/ auf ../assets/font/ an. Dazu kannst Du direkt im Screenshot markierten Eingabefeld (1) den Pfad ganz einfach umschreiben.

Code einfügen

Diesen Code kannst Du in die SCSS-Datei des Child-Themes unter {root}/custom/plugins/{deinChildTheme}/src/Resources/app/storefront/src/scss/base.scss oder einer darin importierten Datei Deiner Wahl kopieren.

3. Schriften auf den Server laden

Unter Schritt 4 - Download files kannst Du eine Zip-Datei der Schriften herunterladen.

Entpacke das heruntergeladene ZIP-Archiv mit den Schriften auf Deinem Computer und lade die einzelnen Schrift-Dateien per FTP-Client in den font-Ordner Deines assets-Ordners.

assets-Ordner

Du findest den assets-Ordner i.d.R. unter

{root}/custom/plugins/{deinChildTheme}/src/Resources/app/storefront/dist/assets

assets-Ordner finden, bei selbst erstelltem Child-Theme

Solltest Du ein eigenes Child-Theme angelegt haben, ist der assets-Order in der theme.json (1) des Themes definiert. Im Abschnitt asset findest Du den Pfad (2) ausgehend von der theme.json.

Dort legst Du nun einen Ordner font an, sodass die in Schritt 3 angegeben Pfade passen. Der Pfad für die Schriften lautet dann vollständig:

{root}/custom/plugins/{deinChildTheme}/src/Resources/app/storefront/dist/assets/font

Achte darauf, dass die einzelnen Schrift-Dateien aus der ZIP-Datei, also ohne zusätzlichen Ordner, in den font-Ordner hochgeladen werden.

4. Schriften in die öffentlichen Verzeichnisse kopieren

In Shopware 6 greift die Storefront jedoch nicht direkt auf die assets-Dateien in Deinem Theme zurück. Diese werden beim Installieren / Aktivieren / Update in das theme-Verzeichnis im public-Ordner des Shops kopiert.

Es erscheint zunächst irreführend die Schriften im assets-Ordner des Themes zu hinterlegen, wenn man diese dann noch in ein anderes Verzeichnis kopieren muss. Es ist dennoch wichtig, die Schriften auch in den Theme-Dateien zu hinterlegen, da bestimmte Aktionen die public-Verzeichnisse löschen und neu erzeugen.

Noch liegen Deine Schriften jedoch im Plugin-Verzeichnis

{root}/custom/plugins/{deinChildTheme}/src/Resources/app/storefront/dist/assets/font

aus Schritt 3 und Du kennst den richtigen Ordner noch nicht, in welchem diese kopiert werden müssen.

Schriften über Konsolen-Befehl kopieren

Über die Shopware Konsole (SSH-Zugang notwendig) und dem Befehl

// Production template
./bin/build-storefront.sh

oder für das Development template von Shopware

// Development template
./psh.phar storefront:build

werden die Dateien aus den assets-Ordner von Erweiterungen und Themes in das richtige Verzeichnis geladen.

Du kennst Dich nicht mit der Shopware Konsole aus und SSH ist die ebenfalls nicht vertraut? im Tab "Schriften über Update kopieren" erklären wir Dir einen alternativen Weg.

Schriften über Update kopieren

Du weißt nicht, wie man die Shopware Konsole bedient? Kein Problem, hier kommt ein alternativer Weg:

Navigiere in das Verzeichnis{root}/custom/plugins/{deinChildTheme}/ auf Deinem Server. Dort befindet sich die composer.json des Plugin-Themes. In Zeile 4 solltest Du die Versionsnummer finden.

Setze einfach die Versionsnummer um eine Version nach oben. Aus 1.2.0 wird z.B. 1.2.1. Datei speichern und wieder auf den Server laden. Im Adminbereich des Shops kannst Du nun das Child-Theme aktualisieren. Dabei werden die Schriften ebenfalls in den richtigen Ordner kopiert.

5. Theme-Konfiguration

Verbindung zu Google Fonts kappen

Zu allererst muss dem Theme mitgeteilt werden, dass die eingetragenen Schriften nicht mehr von den Google Servern geladen werden soll. Deaktiviere dazu den Haken bei Lade Schriften von Google (1).

Schriften zuweisen

Trage den Namen der Schriften, z.B. 'Raleway', sans-serif inklusive der generischen Schriftfamilie in die Felder Schriftart Text (1) und Schriftart Überschrift (2) ein. Schriftart Text und Schriftart Überschrift können hierbei natürlich auch verschiedene Schriftfamilien sein.

Damit die Felder der Custom Schriften (Google Fonts oder selbst gehostet) verwendet werden, müssen in den Felder Schriftart Text (5) und Schriftart Überschrift (6) auf den Wert --- Verwende 'Eigene Schriftarten' --- gestellt werden.

Die Schriftstärken (3, 4) müssen hierbei nicht angegeben werden, da diese im CSS-Code aus Schritt 3 hinterlegt werden und nur zum Laden über die Google Server verwendet wurden.