> For the complete documentation index, see [llms.txt](https://wiki.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.themeware.design/wissensdatenbank/grundwissen/schriftkonfiguration.md). # Schriftkonfiguration In der ThemeWare® Konfiguration findest du zwei Schriftkonfigurationsfelder (Textfelder vom Typ [**Schriftart**](https://wiki.themeware.design/wissensdatenbank/anleitungen/konfiguration/feldtypen-in-der-theme-konfiguration#fontfamily)) im Tab "Layout" => Bereich "Typografie" - je eines im Abschnitt "Text" und im Abschnitt "Überschriften". Hier konfigurierst du die Schrift für Text und für Überschriften. {% hint style="info" %} **Hinweis**: Grundlagen zur Schriftkonfiguration findest in der ThemeWare® Einführung: [Schriften konfigurieren](/wissensdatenbank/einfuehrung/schriften-konfigurieren.md) {% endhint %} 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. {% hint style="success" %} **Tipp**: Es ist grundsätzlich sinnvoll mit möglichst wenigen Schriften zu arbeiten, damit sich der PageSpeed-Score nicht durch erhöhte Ladezeiten verschlechtert. {% endhint %} {% hint style="warning" %} **Wichtig**: Bitte achte darauf, dass alle Konfigurationsfelder valide konfiguriert sind. Leere Felder sind i.d.R. nicht "zulässig". {% endhint %} ### 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. {% hint style="info" %} **Hinweis**: Wir empfehlen Fonts grundsätzlich "lokal einzubinden" also die Fonts von deinem Webserver laden zu lassen und keine API Dritter zu nutzen. {% endhint %} ### 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 – du trägst sie einfach in das Feld **Schriftart** ein. Welche Schriften das sind, mit welchen Strichstärken sie kommen und wie sie aussehen, findest du im ThemeWare® Handbuch: {% embed url="" %} ThemeWare® Handbuch => Schriften {% endembed %} #### 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". {% hint style="success" %} **Tipp**: Eine detaillierte Übersicht für gängige Browser findest du, wenn du nach "Websichere Schriften" googelst. {% endhint %} 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. {% hint style="info" %} **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`). {% endhint %} ## 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. ``` Stichstärken: 300 = Light 400 = Regular 500 = Medium 600 = SemiBold 700 = Bold 800 = ExtraBold 900 = Black ``` 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](https://fonts.google.com) nachsehen – oder du nutzt das Tool [google-webfonts-helper](https://gwfh.mranftl.com/fonts/). 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](https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2F8CdB7aiO4pTKyFSWgOvn%2Fimage.png?alt=media\&token=273d2031-7d10-4125-aa3a-cf35d40d7169) {% hint style="success" %} **Tipp**: Achte darauf, dass die Schriftarten für "Texte" und "Überschriften" die selben Strichstärken zur Verfügung haben. {% endhint %} ## Größenkorrektur Nicht jede Schrift wirkt bei gleicher Schriftgröße gleich groß. Mit der Größenkorrektur skalierst du eine Schriftart, ohne eine einzige Schriftgröße anzufassen. Es gibt zwei Felder, je eines im Abschnitt "Text" und im Abschnitt "Überschriften". So gehst du vor: 1. Trage im Feld **Größenkorrektur** einen Wert ein. Der Standard ist `100`, also keine Korrektur – möglich sind Werte von `75` bis `125`. 2. Speichere die Theme-Konfiguration und prüfe deinen Shop. Die Breite der Beschriftungen wächst mit, deshalb solltest du Buttons, Badges und die Navigation daraufhin ansehen, ob Beschriftungen umbrechen. 3. Taste dich in kleinen Schritten heran: Ab etwa `120` rücken bei mehrzeiligem Fließtext die Zeilen sichtbar zusammen. {% hint style="info" %} **Hinweis**: Bei **Inter**, bei aktiviertem "Google Fonts importieren" und bei eigenen Schriften greift die Größenkorrektur nicht. Bindest du eine eigene Schrift über eigenes CSS ein, kannst du `size-adjust` direkt in deinem eigenen `@font-face` setzen. {% endhint %} {% hint style="success" %} **Tipp**: Richtwerte für alle mitgelieferten Schriften und alle Details zur Größenkorrektur findest du im Handbuch unter "Schriften". Sie sind als Startpunkt gedacht – entscheide am Ende nach dem, was du im Shop siehst. {% endhint %} ## 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. {% hint style="info" %} **Hinweis**: Alles zum Thema "Google Fonts" - warum die Google Fonts API datenschutzrechtlich heikel ist, wie du deinen Shop prüfst und welche Wege es gibt - haben wir hier zusammengestellt: [Google Fonts](/mehr-wissen/google-fonts.md) {% endhint %} *** ## Weiterführende Informationen * Einführung: Wie du Schriften in deinem Shop konfigurieren kannst, erfährst du im Artikel [Schriften konfigurieren](/wissensdatenbank/einfuehrung/schriften-konfigurieren.md) * [Feldtypen in der Theme-Konfiguration](/wissensdatenbank/anleitungen/konfiguration/feldtypen-in-der-theme-konfiguration.md) * Anleitung: [Fonts lokal einbinden](/wissensdatenbank/anleitungen/fonts/fonts-lokal-einbinden.md) * Anleitung: [Google Fonts importieren](/wissensdatenbank/anleitungen/fonts/google-fonts-importieren.md) * Handbuch: [Schriften](https://doku.themeware.design/mehr-wissen/schriften) – mitgelieferte Schriften und Richtwerte zur Größenkorrektur