Zenit Design - Themes
Theme kaufenThemesSupport
DE
DE
  • Erste Schritte
  • Start Guides
    • Atmos - Demo 1
    • Atmos - Demo 2
    • Atmos - Demo 3
    • Atmos - Demo 4
    • Gravity - Demo 1
    • Gravity - Demo 2
    • Horizon - Demo 1
    • Horizon - Demo 2
    • Sphere - Demo 1
    • Sphere - Demo 2
    • Stratus - Demo 1
    • Stratus - Demo 2
    • Stratus - Demo 3
    • Stratus - Demo 4
  • Tipps
    • Dashboard
    • Theme Konfiguration
    • Lexikon
    • Mehrere Verkaufskanäle
  • Vorlagen
  • Support
    • Error auslesen
    • Ursache finden
  • 🎨Styling
    • Allgemein
      • Grundlayout
      • Produktbilder
      • Produkt Layout-Typ
      • Globales Hintergrundbild
      • Preloader
      • Akzentlinie
      • Scroll Animation
    • Typografie & Farben
      • Theme-Farben
      • Status-Ausgaben
      • Schriftarten
      • Typografie
      • E-Commerce
      • Buttons
    • Logos
    • Header
      • Header
      • Suche
      • Top Bar
      • Shop Navigation
      • Main Navigation
      • Flyout Navigation
      • Dropdown Navigation
    • Footer
      • Footer
      • Inhalte
      • Spalten
      • Spalten Styling
      • Unterer Footer
    • Elemente
      • Sidebar
      • Sidebar Navigation
      • Formulare
      • Bild- & Galerie-Slider
      • Produkt Slider
      • Kategorie Listing Slider
      • Paginierung
      • Breadcrumbs
      • Cookie Banner
      • Offcanvas
      • Backdrop
      • Scroll-Up Button
    • Kategorie
      • Kategorie-Header
      • Hero Sektion
      • Filter
      • Listing Actions
      • Produkt-Boxen
      • Quickview
    • Produkt
      • Details
      • Galerie
      • Beschreibung
      • Beschreibung Navigation
      • Beschreibung Inhalt
    • Kasse
      • Warenkorb
      • Kasse
  • ⚙️Einstellungen
    • Grundeinstellungen
    • Zusatzfeld Zuweisung
      • Zusatzfelder für Details auf der Produktseite
      • Zusatzfelder für Produkt-Datenblätter
    • Social Media Icons
    • Marketing Text Slider
    • Custom Tab Detailseite
    • Custom Spalten (Footer)
    • Eigener Code
  • 📂Inhalte
    • Erlebniswelten
      • Sektionen
      • Blöcke
        • Elemente
          • Bild Text Slider
          • Suche Banner
          • Text Banner
          • Teaser
          • Features
          • Breadcrumbs
          • Code
          • Trenner
          • Kategorie-Navigation
          • Footer-Navigation
          • Platzhalter
        • Commerce
          • Galerie und Buybox mit Produktname & Hersteller-Logo
          • Galerie und Buybox mit Produktname & Hersteller-Logo & Beschreibung
          • Galerie und Buybox mit Beschreibung
          • Galerie mit Beschreibung und Buybox mit Produktname & Hersteller-Logo
        • Kategorie
          • Kategorie Listing
        • Spalten
        • Layouts
      • Block Innen-Abstände
      • Block Außen-Abstände
      • Animation
      • Erlebniswelt Beispiel
      • CSS-Variablen
    • Kategorieseite
      • Hero Sektion
      • Kategorie Header
      • CSS-Klassen
      • Kategorie Labels
      • Kategorie Icons
      • Produkte pro Zeile
    • Produktseite
      • Layouts
      • Standardlayout
      • Galerie Modus
      • Custom Tabs
      • Videos Tab
      • Datenblätter
    • Produktbilder
      • Bildgrößen
      • Bildformat
      • Dateiformat
      • Produktbilder Hintergrund
    • Layout-Typ
    • Responsive Tabellen
    • Mehrsprachigkeit
  • 🎓Tutorials
    • Demodaten importieren
    • Demo-Themekonfiguration importieren
    • Child-Theme duplizieren
    • Individuelle Anpassungen
    • Konfiguration export/import
    • Zusatzfelder export/import
    • Schriften lokal einbinden
    • Schriften lokal einbinden mit Child-Theme
  • 🛠️Update Guides
    • Child-Theme Update
    • Shopware 6.7.0.0
    • Shopware 6.6.9.0
    • Shopware 6.6.0.0
    • Shopware 6.5.0.0
    • Shopware 6.4.8.0
    • Theme 3.5.3
    • Theme 2.11.0
  • ❓FAQ
    • Übersicht
    • Barrierefreiheit
      • Typografie
      • Farben
      • Bilder
      • Video
      • Checker-Tools und Ressourcen
    • Allgemein
      • Copyright-Hinweis
      • Merkzettel
    • Produkt Layout
    • Lizenzen
      • Testversion vs Vollversion
      • Lizenzdomain ändern
    • Ableitungen
      • Child-Theme
      • Theme-Duplikat
      • Child-Theme vs Theme-Duplikat
    • Updates
      • Theme wird als inkompatibel angezeigt
      • Update wird nicht angezeigt
    • Fehler
      • Child-Theme kann nicht zugewiesen werden
      • Textbausteine zeigen technischen Namen
      • Theme Speichern Fehler
      • SVG Logo wird nicht angezeigt
      • Suche / Input mobile Zoom
      • Text ist nicht sichtbar / lesbar
Powered by GitBook
On this page
  • Google Fonts lokal einbinden
  • 1. Schrift aussuchen
  • 2. CSS einfügen
  • 3. Schriften auf den Server laden
  • 4. Schriften in die öffentlichen Verzeichnisse kopieren
  • 5. Theme-Konfiguration

Was this helpful?

  1. Tutorials

Schriften lokal einbinden mit Child-Theme

Last updated 1 year ago

Was this helpful?

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.

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 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.

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.

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.

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.

Ü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.

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

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.

Trage den Namen der Schriften, z.B. 'Raleway', sans-serif inklusive der 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.

🎓
generischen Schriftfamilie
allgemeine Anleitung
Herokuapp
google webfonts helper
Schriften laden deaktivieren, damit keine Verbindung mehr zu Google aufgebaut wird.