Links

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. 1.
    Öffne die Administration deines Shops
  2. 2.
    Wechsel über die Hauptnavigation in die "Theme-Verwaltung" (1) (2) ("Inahlt" => "Themes")
    • Hinweis: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation.
  3. 3.
    Klicke nun auf dein ThemeWare® Theme um die Bearbeitung zu beginnen
  4. 4.
    Wechsel in den Tab "Layout" (3)
  5. 5.
    Öffne den Bereich "Typografie" (4)
  6. 6.
    Ändere im Abschnitt "Headlines" die Schriftart auf 'Helvetica', sans-serif
  7. 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. 8.
    Speicher die Theme-Konfiguration
  9. 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

Schrift-Konfiguration in ThemeWare®

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 (beispielsweise die "Top-Navigation" im Tab "Header") wo du auswählen kannst ob du die konfigurierte Schrift für "Text" oder für "Überschriften" verwenden möchtest.

Grundlagen der Schriftkonfiguration

Im Feld Schriftart kannst du kommasepariert Schriftarten angeben. Beispielsweise 'Inter', sans-serif .
Hier sind theoretisch mehrere Fonts möglich, welche der Browser als Prioritätenliste interpretiert. Ist "Font 1" nicht verfügbar, versucht er "Font 2" zu laden usw.
Tipp: Es ist grundsätzlich sinnvoll mit möglichst wenigen Schriften zu arbeiten, damit sich der PageSpeed-Score nicht durch erhöhte Ladezeiten verschlechtert.

Schriftart bzw. Webfont

Im Hochkommata geschrieben steht der gewünschte Font bzw. Webfont. In unserem Beispiel "Inter".
Spezielle Schriften bzw. Webfonts sollten immer in Hochkommata geschrieben werden. Bei diesen Fonts kannst du nicht davon ausgehen, dass diese auf allen Geräten installiert sind. Du musst diese Fonts also deinen Besuchern "zur Verfügung stellen".
Um die Fonts deinen Besuchern zur Verfügung zu stellen musst du diese entweder lokal auf deinen Webserver ablegen oder über eine Drittanbieter-API (z.B. Google Fonts) importieren. Mehr Informationen dazu findest du weiter unten im Artikel.
Hinweis: Wir empfehlen Fonts grundsätzlich "lokal einzubinden" also die Fonts von deinem Webserver laden zu lassen und keine API Dritter zu nutzen.

Standard-Schriften

ThemeWare® stellt dir zu deinem Theme passende Fonts bereits zur Verfügung. Diese werden direkt von deinem Webserver geladen ohne eine API bzw. ein Tracking Dritter.
Diese Standard-Schriften kannst du problemlos in der Schrift-Konfiguration nutzen. Da Schriften recht viel Platz einnehmen gibt es für jedes Theme derzeit lediglich ein bis zwei Schriftarten zur Auswahl. Alternative Schriften kannst du aber ganz einfach selber ergänzen. Dazu findest du im Bereich "Anleitung" einen passenden Artikel.

ThemeWare® Standard-Schriften

Welcher Font dir in welcher Strickstärke mit deinem Theme zur Verfügung steht erfährst du in der nachfolgende Tabelle:
Theme
Font
Stichstärken
Bath
Open Sans
300, 400, 500, 600, 700
Roboto Slab
300, 400, 500, 600, 700
Bike
Exo 2
300, 400, 500, 600, 700
Source Sans Pro
300, 400, 600, 700
Bio
Englebert
400
Roboto
300, 400, 500, 700
Clean
Montserrat
300, 400, 500, 600, 700
Electric
Titillium Web
300, 400, 600, 700
Exquisite
Oswald
300, 400, 500, 600, 700
Fit
Source Sans Pro
300, 400, 600, 700
Global
Open Sans
300, 400, 500, 600, 700
Roboto
300, 400, 500, 700
Kids
-
-
Lights
Titillium Web
300, 400, 600, 700
Living
Open Sans
300, 400, 500, 600, 700
Source Sans Pro
300, 400, 600, 700
Modern
-
-
Outdoor
Ubuntu
300, 400, 500, 700
Plants
Source Sans Pro
300, 400, 600, 700
Strong
Oswald
300, 400, 500, 600, 700
Roboto
300, 400, 500, 700
Stichstärken:
300 = Light
400 = Regular
500 = Medium
600 = SemiBold
700 = Bold

Shopware 6 Standard-Schriften

Zusätzlich stellt dir Shopware 6 den Font "Inter" von Rasmus Andersson zur Verfügung. Dieser Font liegt in den Stichstärken 400 (Regular), 600 (SemiBold) und 700 (Bold).

Websichere Schriften

Zusätzlich zu den Standard-Schriften kannst du auch sogenannte "Websichere Schriften" nutzen. Das sind Schriftarten die bereits auf nahezu allen Geräten installiert sind und damit eine hohe Verfügbarkeit haben. Dies wäre beispielsweise die "Arial", die "Verdana", die "Helvetica", die "Courier New", die "Consolas", die "Georgia" oder die "Times New Roman".
Tipp: Eine detaillierte Übersicht für gängige Browser findest du, wenn du nach "Websichere Schriften" googelst.
Solche Schriften kannst du auch ohne Hochkommata eintragen. Du musst dich in diesem Fall nicht darum kümmern, die entsprechende Schriftart deinen Besuchern zur Verfügung zu stellen. Da diese Schriften beriets auf den meisten Geräten installiert sind.
Du kannst solche Schriften auch "stacken" (Stapeln) und mehr als nur eine Schrift angeben um sicher zu gehen. Dies sieht dann wie folgt aus: Helvetica, Arial

Fallback-Schriften

Auf den eigentlichen Font bzw. Webfont folgt ein sogenannter "Fallback-Font". In unserem Beispiel ist dies "sans-serif", also eine serifenlose Schrift.
Mit einer solchen "generische Schrift" bietest du dem Browser die Chance, eine Schriftart auszuwählen, die zumindest vom Typ her der gewünschten Schrift entspricht, falls die eigentliche Schrift nicht geladen werden konnte.
Generische Schriften:
serif > eine Schriftart mit Serifen
sans-serif > eine Schriftart ohne Serifen
cursive > eine Schriftart für Schreibschrift
monospace > eine Schriftart mit dicktengleichen Zeichen
Das bedeutet wenn du eine spezielle Schriftart verwendest, trägst du diese mit Hochkommata zuerst ein. Der Browser versucht dann diese Schrift zu laden.
Falls dies nicht funktioniert (vielleicht blockiert ein Browser das Laden des Fonts) wird der Fallback-Font – also irgendeine "ähnliche" Systemschrift – geladen.
Anmerkung: Es kann durchaus sein, dass der Shop in deinem Webbrowser prima aussieht – weil du die entsprechende Schrift auf deinem Gerät installiert hast.
Rufst du den Shop aber mit einem Gerät (beispielsweise deinem Smartphone) auf – auf welchem die gewünschte Schrift nicht installiert ist, wirst du feststellen, dass die Schrift nicht "korrekt" angezeigt wird.
Prüfe in diesem Fall die Einbindung der Schrift oder nutze eine websichere Schriftart. Mehr dazu findest du im Bereich "Anleitungen".

Konfigurationsmöglichkeiten

Ein Eintrag im Schriftfeld könnte also beispielsweise 'Inter', sans-serif oder 'Inter', Arial, sans-serif oder Helvetica, Arial, sans-serif lauten.
Hinweis: Möchtest du eine Schriftart über die Google Fonts API importieren, ist im Feld "Schriftart" nur eine Schriftart (plus Fallback-Font) möglich (z.B. 'Inter', sans-serif).

Strichstärke

In ThemeWare® kannst du drei Strichstärken definieren: "light", "normal" und "bold". Die Strichstärken beziehen sich dabei auf die Schrift für "Texte" und auf die Schrift für "Überschriften". Prüfe darum welche Strichstärken in den gewählten Schriften verfügbar sind und passe deine Konfiguration ggf. dahingehend an.
Es ist empfehlenswert, dass beide Schriftarten (sofern du zwei unterschiedliche Schriften nutzt), die selben Strichstärken verfügbar haben um "Darstellungsfehler" zu vermeiden.
Die verfügbaren Strickstärken für Google Webfonts kannst du einfach unter fonts.google.com nachsehen – oder du nutzt das Tool google-webfonts-helper.
Du musst dabei nicht drei verschiedene Strichstärken nutzen, du kannst auch alle Strichstärken gleich (z.B. Light: 400, Normal: 400 und Bold: 400) konfigurieren oder nur zwei Strichstärken (z.B. Light: 400, Normal: 400 und Bold: 600) wählen.

Screenshots

Google Fonts - Oswald
Tipp: Achte darauf, dass die Schriftarten für "Texte" und "Überschriften" die selben Strichstärken zur Verfügung haben.

Eigene Fonts oder Webfonts (z.B. Google Fonts) nutzen

Wie bereits erwähnt sind spezielle Schriften bzw. Webfonts nicht automatisch auf jedem Gerät deiner Besucher vorhanden. In diesem Fall würde der Webbrowser den Fallback-Font nutzen.
Damit die Schrift vom Webbrowser deiner Besucher genutzt werden kann, musst du die Schrift dem Browser des Besuchers zur Verfügung stellen. Entweder lässt du Schriften über die API eines Drittanbieters importieren (z.B. Google Fonts) oder du hinterlegst Fonts lokal auf deinem Webserver.
Die lokale Methode kann zwar langsamer sein, als eine API eines Drittanbieters, dafür kannst du mit dieser Methode ein etwaiges Tracking oder eine Datenverarbeitung durch einen externen Anbieter vermeiden, Stichwort DSGVO.
Hinweis: Mehr Informationen zum Thema "Google Fonts" findest du im Bereich "Anleitungen".