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".
Öffne die Administration deines Shops
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.
Klicke nun auf dein ThemeWare® Theme um die Bearbeitung zu beginnen
Wechsel in den Tab "Layout" (3)
Öffne den Bereich "Typografie" (4)
Ändere im Abschnitt "Headlines" die Schriftart auf
'Helvetica', sans-serifScrolle zum Abschnitt "Strichstärke"
Diese ist in unserem Beispiel auf
Light: 400,Normal: 400undBold: 600konfiguriert.Wähle die in Deiner gewünschten Schriftart verfügbaren Strichstärken aus.
Speicher die Theme-Konfiguration
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
Grundwissen: Mehr Informationen zum Thema "Schriftkonfiguration" findest du im Artikel Schriftkonfiguration
ThemeWare® Video-Tutorial
Last updated
