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.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
  • Fonts lokal einbinden
  • 1. Schrift aussuchen
  • 2. CSS einfügen
  • 3. Schriften auf den Server laden
  • 4. Theme-Konfiguration

Was this helpful?

  1. Tutorials

Schriften lokal einbinden

Anleitung zum lokalem Einbinden von Google Fonts

Last updated 1 year ago

Was this helpful?

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

Für diese Anleitung ist die Verwendung eines Child-Themes nicht notwendig.

Solltest Du ein Child-Theme einsetzen wollen, verwende die Anleitung zur

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.

In dieser Anleitung werden die Schriften in den public-Ordner Deiner Installation hinterlegt.

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

Lege lokal eine CSS-Datei mit dem Namen der Schriftart, z.B. raleway.css an und Kopiere den CSS-Code aus dem grauen Kasten in diese Datei hinein.

Verbinde Dich per FTP-Client mit Deinem Onlineshop und navigiere in den Ordner {root}/public/css. Lade die raleway.css Datei in den css-Order Deiner Shopware 6 Installation.

Öffne in der Administration Deines Shopware Shops die Einstellungen (Plugin/App Konfiguration) unter Erweiterungen > Meine Erweiterungen > Tab: Themes > Theme [Variante] > Kontextmenü: Konfiguration

Aktiviere Eigene CSS Dateien aktiv (1) und füge in das Textfeld (2) den Link zur CSS-Datei ein. Ressourcen in den public-Ordner Deiner Installation lassen sich mit einem relativen Pfad aufrufen.

<link rel="stylesheet" href="/css/raleway.css" >

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 {root}/public/fonts-Ordner Deiner Shopware Installation.

4. 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
Einbindung mit Child-Theme.
Herokuapp
google webfonts helper
Schriften laden deaktivieren, damit keine Verbindung mehr zu Google aufgebaut wird.