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
  • Eigene Schriftarten
  • Theme Schriften

Was this helpful?

  1. Styling
  2. Typografie & Farben

Schriftarten

Last updated 6 months ago

Was this helpful?

Schriften können lokal über die Theme Schriften genutzt werden oder extern über die Custom Schriften durch Google Fonts eingebunden werden. Zusätzlich haben wir eine Anleitung, wie Du kannst.

Eigene Schriftarten

Über das Theme stehen Dir alle 1600+ zur Verfügung. Du kannst für Fließtexte und Überschriften separate Schriften oder auch die selbe Schrift definieren.

Möchtest Du für Überschriften und Fließtexte die selbe Schrift verwenden, trage in beide Felder den selben Schriftnamen ein. Die Schriftstärken werden miteinander ergänzt, sollten sich diese in den Feldern unterscheiden.

1. Schrift aussuchen

Um eine Schriftart von Google Fonts zu nutzen, suche Dir einfach je eine Schriftfamilie für Fließtexte (Schriftart Text) und eine Schriftfamilie für Überschriften (Schriftart Überschrift) aus - in diesem Beispiel möchten wir Roboto Condensed als Schriftart für Texte verwenden und geben diese in die Suche ein.

2. Schriftschnitte einsehen

Nach der Auswahl der Schrift können die Schriftschnitte eingesehen werden, welche die Schriftart bereitstellt. In diesem Beispiel bietet 'Roboto Condensed' alle möglichen Schriftschnitte Light 300 bis Bold 900 , da es sich um eine Schriftart handelt.

3. Schrift wählen

Nach den Klick auf Get embed code gelangst Du zu der Seite mit den Einbettungscodes. Hier interessiert uns lediglich der technische Name der Schrift. Notiere Dir daher den Namen der Schriftfamilie. 'Roboto Condensed', sans-serif

font-family: sowie das Semikolon entfallen.

Du musst hier auch keine Auswahl der Schriftschnitte vornehmen - das passiert erst im Theme!

4. Schriftfamilie im Theme hinterlegen.

Trage nun den Namen der Schriftart in das Feld Schriftart Text (1) oder für Überschriften in das Feld Schriftart Überschrift ein. Behalte dabei die generische Schriftfamilie bei, falls die Schriftart wider erwarten einmal nicht geladen werden kann.

Generische Schriftfamilien dienen als Fallback-Mechanismus, ein Mittel, um etwas von der Absicht des Stylesheet Autors zu erhalten für den Fall, wenn keine der angegebenen Schriftarten verfügbar sind.

Generische Schrift
Bedeutung

serif

Schriftzeichen haben abschließende Striche, ausgeweitete oder zugespitzte Enden oder serifenbetonte Enden.

sans-serif

Schriftzeichen haben gerade Strichenden.

monospace

Alle Schriftzeichen haben die gleiche Breite.

cursive

Schriftzeichen in kursiven Schriftarten haben üblicherweise verbindende Striche oder andere kursive Charakteristiken, die über die von kursiven Schriftzügen hinausgehen. Die Schriftzeichen sind teilweise oder ganz verbunden und das Ergebnis ähnelt eher einer Handschrift als gedruckten Lettern.

fantasy

Fantasie Schriftarten sind überwiegend dekorative Schriftarten, die verspielte Darstellungen von Schriftzeichen beinhalten.

Der Inhalt des Feldes Schriftart Text (1) oder Schriftart Überschrift sollte nun so aussehen:

'Roboto Condensed', sans-serif

Die Schriftstärken (Schriftschnitte) wähle im Feld Schriftstärken Text (2) oder bei Überschriften im Feld Schriftstärken Überschrift aus. Du kannst nur die Schriftschnitte verwenden, welche die Schrift ausliefert.

Stelle sicher, dass Schriften laden (3) aktiv ist und bei den Theme Schriftarten im Feld Schriftart Text (4) eingestellt ist, dass die Eigene Schriftarten verwendet werden sollen.

Theme Schriften

Theme Schriften können ebenso wie die Custom Schriften für Fließtexte (1) und Überschriften (2) separat eingestellt werden. Die mitgelieferten Schriftschnitte (3) stehen in eckigen Klammern hinter dem Schriftnamen.

Es ist ebenso möglich eine Theme Schrift für z.B. Fließtexte zu verwenden und eine Custom Schrift für die Überschriften. Beachte aber, dass durch die extern-eingebundene Custom-Schrift noch immer eine Verbindung zu den Google Servern besteht, es sei denn, Du hast die Custom-Schrift selbst gehostet und die Option Schriften laden im Abschnitt Custom Schriften deaktiviert.

Sobald für beide Schriften eine andere Auswahl als - Custom Schriftart - gewählt wurde, werden keine Schriften mehr von Google Servern geladen. Die Einstellung Theme Schriften überschreibt die Einstellung der Custom Schriften.

Um keine unnötigen Ladezeiten zu erzeugen, wähle nur die Schriftstärken aus, welche Du auch wirklich nutzen möchtest. Häufig können für einzelne Elemente spezielle Schriftschnitte in der Konfiguration gewählt werden. Werden Schriftschnitte abgerufen, welche die Schrift nicht ausliefert, wenden Browser dan an.

Neben der Einbindung von externen oder Schriften, bietet das Theme eine Auswahl an integrierten Schriften. Diese Schriften werden mit dem Theme ausgeliefert und befinden sich nach der Installation auf Deinem Server. Du musst Dir daher bei den Theme Schriften keine Gedanken um den Datenschutz machen.

🎨
Näherungsverfahren
selbstgehosteten
Schriften selbst hosten
Google Fonts Schriftarten