Schriften konfigurieren

In diesem Artikel geht es um Typografie, dass heißt, wir zeigen dir, wie du Schriftarten in deinem Shop konfigurieren kannst.

Beispiel

Schriften bzw. Fonts konfigurierst du über die ThemeWare® Konfiguration im Shopware 6 Theme-Manager deiner Administration.

Beispiel: In unserem Beispiel ändern wir die Schriftart für Überschriften auf die Schrift "Helvetica".

  1. Öffne die Administration deines Shops

  2. Wechsel über die Hauptnavigation in die "Theme-Verwaltung" (1) (2) ("Inhalte" => "Themes")

    • Hinweis: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation.

  3. Klicke nun auf dein ThemeWare® Theme um die Bearbeitung zu beginnen

  4. Wechsel in den Tab "Layout" (3)

  5. Öffne den Bereich "Typografie" (4)

  6. Ändere im Abschnitt "Headlines" die Schriftart auf 'Helvetica', sans-serif

  7. Scrolle zum Abschnitt "Strichstärke"

    • Diese ist in unserem Beispiel auf Light: 400, Normal: 400 und Bold: 600 konfiguriert.

    • Wähle die in Deiner gewünschten Schriftart verfügbaren Strichstärken aus.

  8. Speicher die Theme-Konfiguration

  9. Wechsel in die Storefront und lade die Seite einmal neu

Du hast nun die Schrift für die Headlines in deiner Storefront geändert.

Screenshots

Ideales Vorgehen bei der Schrift-Konfiguration

Konfiguriere immer zuerst die Schriftart und erst dann die Schriftgröße und die Strichstärke.

Schriften sind sehr individuell und je nach Schriftart wirkt sich die Größe bzw. die Strichstärke unterschiedlich aus.

Tipp: Es ist sinnvoll für den Text eine möglichst klar lesbare, schlichte Schriftart zu verwenden. Wenn du einen schnörkeligeren Font nutzen möchtest, dann maximal in der Überschrift.

Schriftkonfiguration für Shop-Elemente

Es gibt paar Bereiche in der Theme-Konfiguration (z.B. die "Top-Navigation" im Tab "Header" oder in den ThemeWare® CMS-Elementen) wo du auswählen kannst ob du die konfigurierte Schrift für "Text" oder für "Überschriften" verwenden möchtest.


Weiterführende Informationen

ThemeWare® Video-Tutorial

Last updated

Logo

© 2024 by ThemeWare® | Made with 💙 by TC-Innovations GmbH