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.
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.
Um die Schriften als Webfonts von Google Fonts herunterladen zu können, kannst Du den kostenlosen Dienst von Herokuapp nutzen.
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.
Per CSS/SCSS definierst Du, welche Schriften das Theme laden soll.
Shopware 6.5
Shopware 6.4
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.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.
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.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
assets-Ordner finden, bei selbst erstelltem Child-Theme
Du findest den
assets-Ordner i.d.R. unter{root}/custom/plugins/{deinChildTheme}/src/Resources/app/storefront/dist/assets
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..png?alt=media)
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
Schriften über Update 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.
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.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 Schriften laden.
Schriften laden deaktivieren, damit keine Verbindung mehr zu Google aufgebaut wird.
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 (3) und Schriftart Überschrift (4) auf den Wert
- Custom Schriftart - gestellt werden.
Die Schriftstärken 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.
Last modified 3mo ago