> For the complete documentation index, see [llms.txt](https://doku.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doku.themeware.design/mehr-wissen/schriften.md).

# Schriften

ThemeWare® liefert eine Auswahl an Schriften direkt mit. Sie liegen auf deinem eigenen Webserver und werden von dort geladen – ohne API und ohne Verbindung zu Dritten. Dieser Artikel zeigt dir, welche Schriften das sind und wie du ihre Größe feinjustierst.

{% hint style="info" %}
**Hinweis**: Alles rund um **Google Fonts** – wie du prüfst, ob dein Shop Schriften bei Google lädt, und wie du das änderst – haben wir in der ThemeWare® Wissensdatenbank zusammengestellt:

<https://wiki.themeware.design/mehr-wissen/google-fonts>
{% endhint %}

## Mitgelieferte Schriften

Da die Google Fonts Bibliothek inzwischen mehr als 900 Schriftarten (über 5.000 Schriften) bietet, können wir leider nicht alle Schriften in ThemeWare® integrieren.

In ThemeWare® sind alle von ThemeWare® verwendeten Fonts Bestandteil jedes Themes. Somit stehen dir in jedem Theme 14+1 Schriften zur Verfügung:

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><a href="https://fonts.google.com/specimen/Inter">Inter</a> (Standard)</td><td><strong>Schriftart</strong>: <code>'Inter', sans-serif</code></td><td><strong>Strichstärken</strong>: 400, 600, 700</td><td>z.B. ThemeWare® Modern</td><td><a href="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FaDNIn9yR6h0t0Tq9VBYs%2Ftwt-font-inter.png?alt=media&amp;token=2b1a4817-2a31-4cf5-83b7-776f6b73a4ff">twt-font-inter.png</a></td></tr><tr><td><a href="https://fonts.google.com/specimen/Englebert">Englebert</a></td><td><strong>Schriftart</strong>: <code>'Englebert', sans-serif</code></td><td><strong>Strichstärke</strong>: 400</td><td>z.B. ThemeWare® Bio</td><td><a href="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FKGMTcpslVnvdwS49qPgG%2Ftwt-font-englebert.png?alt=media&amp;token=bfad45e0-96c5-4ff3-9f7a-1b8c768155da">twt-font-englebert.png</a></td></tr><tr><td><a href="https://fonts.google.com/specimen/Exo+2">Exo 2</a></td><td><strong>Schriftart</strong>: <code>'Exo 2', sans-serif</code></td><td><strong>Strichstärken</strong>: 300, 400, 500, 600, 700</td><td>z.B. ThemeWare® Bike</td><td><a href="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FHBN5tgYteB6quURXkvl9%2Ftwt-font-exo-2.png?alt=media&amp;token=2778018d-075c-4afd-ad49-005a76c268ee">twt-font-exo-2.png</a></td></tr><tr><td><a href="https://fonts.google.com/specimen/Lora">Lora</a></td><td><strong>Schriftart</strong>: <code>'Lora', serif</code></td><td><strong>Strichstärken</strong>: 400, 500, 600, 700</td><td><strong>Neu v5.2.0</strong><br>Serif, auch für Fließtext</td><td><a href="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2F4D9OjvYvD04wax3zTs7a%2Ftwt-font-lora.png?alt=media&amp;token=80f79784-bff0-4b16-860c-83178a9c7d26">twt-font-lora.png</a></td></tr><tr><td><a href="https://fonts.google.com/specimen/Montserrat">Montserrat</a></td><td><strong>Schriftart</strong>: <code>'Montserrat', sans-serif</code></td><td><strong>Strichstärken</strong>: 300, 400, 500, 600, 700</td><td>z.B. ThemeWare® Clean</td><td><a href="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FfzrvzxnHMUzP6AMYjjnI%2Ftwt-font-montserrat.png?alt=media&amp;token=7b7d222d-ebc2-4b32-9c8f-8876493cc5c2">twt-font-montserrat.png</a></td></tr><tr><td><a href="https://fonts.google.com/specimen/Open+Sans">Open Sans</a></td><td><strong>Schriftart</strong>: <code>'Open Sans', sans-serif</code></td><td><strong>Strichstärken</strong>: 300, 400, 500, 600, 700</td><td>z.B. ThemeWare® Living</td><td><a href="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FNjdG1CVxU2KdOf1tUXuz%2Ftwt-font-open-sans.png?alt=media&amp;token=7022871c-419e-4db5-b054-6e6a088b9e1f">twt-font-open-sans.png</a></td></tr><tr><td><a href="https://fonts.google.com/specimen/Oswald">Oswald</a></td><td><strong>Schriftart</strong>: <code>'Oswald', sans-serif</code></td><td><strong>Strichstärken</strong>: 300, 400, 500, 600, 700</td><td>z.B. ThemeWare® Strong</td><td><a href="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FOlNRat0dfdQRz5OeJt8d%2Ftwt-font-oswald.png?alt=media&amp;token=bb70fc74-a1db-4501-9ca2-711f5f0e54e7">twt-font-oswald.png</a></td></tr><tr><td><a href="https://fonts.google.com/specimen/Playfair+Display">Playfair Display</a></td><td><strong>Schriftart</strong>: <code>'Playfair Display', serif</code></td><td><strong>Strichstärken</strong>: 400, 500, 600, 700, 800, 900</td><td><strong>Neu v5.2.0</strong><br>für Überschriften</td><td><a href="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2Fb4zqTStWNnQgt3YD7yPz%2Ftwt-font-playfair-display.png?alt=media&amp;token=ea5e8246-5cb6-43a7-9c60-698ccaee6677">twt-font-playfair-display.png</a></td></tr><tr><td><a href="https://fonts.google.com/specimen/Roboto">Roboto</a></td><td><strong>Schriftart</strong>: <code>'Roboto', sans-serif</code></td><td><strong>Strichstärken</strong>: 300, 400, 500, 600, 700</td><td>z.B. ThemeWare® Strong</td><td><a href="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FtMcSJG1pNK8MERc1mPUn%2Ftwt-font-roboto.png?alt=media&amp;token=2cf7fb12-8521-473f-a4d5-a7240934a3a4">twt-font-roboto.png</a></td></tr><tr><td><a href="https://fonts.google.com/specimen/Roboto+Slab">Roboto Slab</a></td><td><strong>Schriftart</strong>: <code>'Roboto Slab', sans-serif</code></td><td><strong>Strichstärken</strong>: 300, 400, 500, 600, 700</td><td>z.B. ThemeWare® Bath</td><td><a href="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FpW0K5QTkcpNf4vD2U6fb%2Ftwt-font-roboto-slab.png?alt=media&amp;token=49806db2-a1a5-4206-a6d7-91e6f91ba21b">twt-font-roboto-slab.png</a></td></tr><tr><td><a href="https://fonts.google.com/specimen/Sen">Sen</a></td><td><strong>Schriftart</strong>: <code>'Sen', sans-serif</code></td><td><strong>Strichstärken</strong>: 400, 500, 600, 700</td><td><strong>Neu v5.2.0</strong></td><td><a href="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2Fg5020Z55bbiErdr1tOKo%2Ftwt-font-sen.png?alt=media&amp;token=7bea47e6-506f-447a-8512-944aeb8700a7">twt-font-sen.png</a></td></tr><tr><td><a href="https://fonts.google.com/specimen/Source+Sans+3">Source Sans 3</a></td><td><strong>Schriftart</strong>: <code>'Source Sans 3', sans-serif</code></td><td><strong>Strichstärken</strong>: 300, 400, 500, 600, 700</td><td>z.B. ThemeWare® Living</td><td><a href="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FtE3h1SXhJbiRKcoR3gVG%2Ftwt-font-source-sans-3.png?alt=media&amp;token=2d2f354f-db2f-45e0-8eac-9c04fd9f92a6">twt-font-source-sans-3.png</a></td></tr><tr><td><a href="https://fonts.google.com/specimen/Source+Serif+4">Source Serif 4</a></td><td><strong>Schriftart</strong>: <code>'Source Serif 4', serif</code></td><td><strong>Strichstärken</strong>: 300, 400, 500, 600, 700</td><td><strong>Neu v5.2.0</strong><br>Serif, auch für Fließtext</td><td><a href="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FbIcYgOA0OHZ0g1FemE54%2Ftwt-font-source-serif-4.png?alt=media&amp;token=5b0d55e8-365a-4851-8465-66b589f88260">twt-font-source-serif-4.png</a></td></tr><tr><td><a href="https://fonts.google.com/specimen/Titillium+Web">Titillium Web</a></td><td><strong>Schriftart</strong>: <code>'Titillium Web', sans-serif</code></td><td><strong>Strichstärken</strong>: 300, 400, 600, 700</td><td>z.B. ThemeWare® Lights</td><td><a href="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2F2EHOUJvou0q7IrbZZF1C%2Ftwt-font-titillium-web.png?alt=media&amp;token=51626047-d6d0-448d-a2ce-300940241c0d">twt-font-titillium-web.png</a></td></tr><tr><td><a href="https://fonts.google.com/specimen/Ubuntu">Ubuntu</a></td><td><strong>Schriftart</strong>: <code>'Ubuntu', sans-serif</code></td><td><strong>Strichstärken</strong>: 300, 400, 500, 700</td><td>z.B. ThemeWare® Outdoor</td><td><a href="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FLtjy6YRd5w0U29rL9kX5%2Ftwt-font-ubuntu.png?alt=media&amp;token=e48867e3-c72e-4b79-8676-16e76c708020">twt-font-ubuntu.png</a></td></tr><tr><td>Weiter Schriften folgen später...</td><td></td><td></td><td></td><td></td></tr></tbody></table>

{% hint style="info" %}
**Hinweis zu "Source Sans Pro"**: Adobe hat diese Schrift zurückgezogen, bei Google Fonts ist sie nicht mehr gelistet. Nachfolgerin ist **Source Sans 3** - dieselbe Zeichnung, weiterhin gepflegt.

Trägst du weiterhin `'Source Sans Pro', sans-serif` ein, funktioniert das unverändert: ThemeWare® liefert dafür die Dateien von Source Sans 3 aus. Für neue Shops ist `'Source Sans 3', sans-serif` der richtige Wert.
{% endhint %}

<figure><img src="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FoEEBICvddwqX2qcAYxOE%2Ftwt-schriften-uebersicht-de.png?alt=media&amp;token=f62de7ad-a695-41a5-9a04-3a8f1ddb74e6" alt="Alle Schriften, die ThemeWare® mitliefert"><figcaption><p>Alle Schriften, die ThemeWare® mitliefert</p></figcaption></figure>

ThemeWare® überprüft automatisch, ob in den Konfigurationsfeldern für die Schriftart eine lokal verfügbare "Standard-Schrift" angegeben wurde. Ist das der Fall, wird diese DSGVO-konform direkt von deinem eigenen Server ("lokal") geladen.

Bitte beachte, welche Schriften Bestandteil von ThemeWare® sind (siehe Übersicht oben) und welche Konfigurationswerte du optimalerweise verwendest – zum Beispiel: `'Open Sans', sans-serif`

> ThemeWare® Schriftkonfiguration findest du hier:
>
> * Tab "Layout" => Bereich "Typografie" => Abschnitt "Text" => Schriftart
> * Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften" => Schriftart

Falls du eine Schriftart angibst, die nicht Bestandteil von ThemeWare® ist und auch nicht manuell eingebunden wurde, verwendet der Browser stattdessen eine sogenannte "Fallback-Schrift" – das ist eine Systemschrift, die lokal auf dem Gerät des Besuchers verfügbar ist (z. B. Arial, Helvetica oder Times New Roman).

## Größenkorrektur je Schriftart

Nicht jede Schrift wirkt bei gleicher Schriftgröße gleich groß. Manche Schriften zeichnen ihre Buchstaben niedriger oder schmaler als andere und wirken dadurch kleiner, ohne dass an der Schriftgröße etwas falsch wäre.

Dafür gibt es die Größenkorrektur - je ein Feld für die Text- und die Überschriftenschrift:

Tab "Layout" => Bereich "Typografie" => Abschnitt "Text" => "Größenkorrektur"

Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften" => "Größenkorrektur"

Der Wert gehört zur Schriftart, nicht zur Rolle: er wirkt überall dort, wo diese Schrift im Shop vorkommt. Trägst du in beide Felder dieselbe Schrift ein, gibt es nur eine Schrift und damit auch nur einen Wert: Es zählt dann das Feld, in dem du etwas eingetragen hast. Stehen in beiden Feldern unterschiedliche Werte, gilt der aus dem Abschnitt "Text".

### Richtwerte

Die folgenden Werte sind Startpunkte, gemessen gegen Inter als Bezugsschrift. Der Standard ist immer `100`, an bestehenden Shops ändert sich also nichts, solange du nichts einträgst.

| Schriftart       | Richtwert | Warum                                                  |
| ---------------- | --------- | ------------------------------------------------------ |
| Inter            | `100`     | Bezugsschrift - kommt von Shopware, nicht korrigierbar |
| Englebert        | `115`     | läuft schmal, wirkt dadurch klein                      |
| Exo 2            | `110`     | kleine x-Höhe                                          |
| Lora             | `105`     | kleine x-Höhe                                          |
| Montserrat       | `105`     | -                                                      |
| Open Sans        | `100`     | -                                                      |
| Oswald           | `100`     | schmal laufende Display-Schrift, so gewollt            |
| Playfair Display | `105`     | -                                                      |
| Roboto           | `105`     | -                                                      |
| Roboto Slab      | `105`     | -                                                      |
| Sen              | `110`     | kleine Versalhöhe                                      |
| Source Sans 3    | `110`     | kleine Versalhöhe                                      |
| Source Serif 4   | `110`     | kleine Versalhöhe                                      |
| Titillium Web    | `105`     | -                                                      |
| Ubuntu           | `105`     | -                                                      |

{% hint style="warning" %}
Die Korrektur vergrößert die Buchstaben, nicht die Flächen um sie herum. Ein Button oder ein Badge behält seine Höhe, weil sich die Zeilenhöhe an der Schriftgröße orientiert und die bleibt unverändert. Der Text wird also größer, der Abstand zum Rand kleiner. Die Breite wächst dagegen mit - prüfe nach einer Änderung Buttons, Badges und die Navigation.

Möglich sind Werte von `75` bis `125`. Ab etwa `120` rücken bei mehrzeiligem Fließtext die Zeilen sichtbar zusammen, weil auch der Zeilenabstand unverändert bleibt.
{% endhint %}

{% hint style="info" %}
Die Größenkorrektur wirkt nicht bei **Inter**: diese Schrift stammt von Shopware selbst, wir schreiben in deren Einbindung nichts hinein. Ebenso greift sie nicht, wenn "Google Fonts importieren" aktiviert ist oder du eine eigene Schrift einbindest.
{% endhint %}

## Eigene Schriften nutzen

Möchtest du eine Schrift verwenden, die ThemeWare® nicht mitliefert, bindest du sie lokal auf deinem Webserver ein. Die passenden Anleitungen findest du in der ThemeWare® Wissensdatenbank:

{% embed url="<https://wiki.themeware.design/wissensdatenbank/anleitungen/fonts>" %}
ThemeWare® Wissensdatenbank => Fonts bzw. Schriften
{% endembed %}

#### Weiterführende Informationen

* Wissensdatenbank: [Google Fonts](https://wiki.themeware.design/mehr-wissen/google-fonts)
* Grundwissen: [Schriftkonfiguration](https://wiki.themeware.design/wissensdatenbank/grundwissen/schriftkonfiguration)
* Einführung: [Schriften konfigurieren](https://wiki.themeware.design/wissensdatenbank/einfuehrung/schriften-konfigurieren)
* Anleitung: [Fonts lokal einbinden](https://wiki.themeware.design/wissensdatenbank/anleitungen/fonts/fonts-lokal-einbinden)
* Anleitung: [Fonts mit dem ThemeWare® Customizing Plugin lokal einbinden](https://wiki.themeware.design/wissensdatenbank/anleitungen/fonts/fonts-mit-dem-themeware-customizing-plugin-lokal-einbinden)