Schriftkonfiguration

In der ThemeWare® Konfiguration findest du zwei Schriftkonfigurationsfelder (Textfelder vom Typ ) 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.

Wichtig: Bitte achte darauf, dass alle Konfigurationsfelder valide konfiguriert sind. Leere Felder sind i.d.R. nicht "zulässig".

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:

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.

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
Feldtypen in der Theme-Konfiguration
Anleitung: Fonts lokal einbinden
Anleitung: Google Fonts importieren

PreviousPlugin Kompatibilität (HC-Architecture®)NextShop-Logo

Last updated 1 year ago

Was this helpful?