Schriftkonfiguration
In der ThemeWare® Konfiguration findest du zwei Schriftkonfigurationsfelder (Textfelder vom Typ Schriftart) im Tab "Layout" => Bereich "Typografie" => Abschnitt "Text". Hier konfigurierst du die Schrift für Headlines und für Text.
Hinweis: Grundlagen zur Schriftkonfiguration findest in der ThemeWare® Einführung: Schriften konfigurieren
Darüber hinaus gibt es an verschiedenen Stellen Schrift-Auswahlfelder (Dropdown-Auswahl) wo du für bestimmte Element auswählen kannst ob das Element die Schrift der Headlines oder vom Text nutzen soll.
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
Ab ThemeWare® 1.1.7 sind alle von ThemeWare® verwendeten Fonts Bestandteil jedes ThemeWare® Themes. Somit stehen dir in jedem Theme 10+1 Schriften zur Verfügung:
Schriftart: 'Inter', sans-serif
Strichstärken: 400, 600, 700
z.B. ThemeWare® Modern
Schriftart: 'Englebert', sans-serif
Strichstärke: 400
z.B. ThemeWare® Bio
Schriftart: 'Exo 2', sans-serif
Strichstärken: 300, 400, 500, 600, 700
z.B. ThemeWare® Bike
Schriftart: 'Montserrat', sans-serif
Strichstärken: 300, 400, 500, 600, 700
z.B. ThemeWare® Clean
Schriftart: 'Open Sans', sans-serif
Strichstärken: 300, 400, 500, 600, 700
z.B. ThemeWare® Living
Schriftart: 'Oswald', sans-serif
Strichstärken: 300, 400, 500, 600, 700
z.B. ThemeWare® Strong
Schriftart: 'Roboto', sans-serif
Strichstärken: 300, 400, 500, 700
z.B. ThemeWare® Strong
Schriftart: 'Roboto Slab', sans-serif
Strichstärken: 300, 400, 500, 600, 700
z.B. ThemeWare® Bath
Schriftart: 'Source Sans Pro', sans-serif
Strichstärken: 300, 400, 600, 700
z.B. ThemeWare® Living
Schriftart: 'Titillium Web', sans-serif
Strichstärken: 300, 400, 600, 700
z.B. ThemeWare® Lights
Schriftart: 'Ubuntu', sans-serif
Strichstärken: 300, 400, 500, 700
z.B. ThemeWare® Outdoor
Weiter Schriften folgen später...
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.
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
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".
Weiterführende Informationen
Einführung: Wie du Schriften in deinem Shop konfigurieren kannst, erfährst du im Artikel Schriften konfigurieren
Anleitung: Fonts lokal einbinden
Anleitung: Google Fonts importieren
Last updated
