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.
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
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.
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.
Du findest den assets-Ordner i.d.R. unter
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:
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
aus Schritt 3 und Du kennst den richtigen Ordner noch nicht, in welchem diese kopiert werden müssen.
Über die Shopware Konsole (SSH-Zugang notwendig) und dem Befehl
oder für das Development template von Shopware
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.
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.
Last updated
