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.
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:
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:
| Cover image | ||||
|---|---|---|---|---|
| Inter (Standard) | Schriftart: 'Inter', sans-serif | Strichstärken: 400, 600, 700 | z.B. ThemeWare® Modern | twt-font-inter.png |
| Englebert | Schriftart: 'Englebert', sans-serif | Strichstärke: 400 | z.B. ThemeWare® Bio | twt-font-englebert.png |
| Exo 2 | Schriftart: 'Exo 2', sans-serif | Strichstärken: 300, 400, 500, 600, 700 | z.B. ThemeWare® Bike | twt-font-exo-2.png |
| Lora | Schriftart: 'Lora', serif | Strichstärken: 400, 500, 600, 700 | Neu v5.2.0 Serif, auch für Fließtext | twt-font-lora.png |
| Montserrat | Schriftart: 'Montserrat', sans-serif | Strichstärken: 300, 400, 500, 600, 700 | z.B. ThemeWare® Clean | twt-font-montserrat.png |
| Open Sans | Schriftart: 'Open Sans', sans-serif | Strichstärken: 300, 400, 500, 600, 700 | z.B. ThemeWare® Living | twt-font-open-sans.png |
| Oswald | Schriftart: 'Oswald', sans-serif | Strichstärken: 300, 400, 500, 600, 700 | z.B. ThemeWare® Strong | twt-font-oswald.png |
| Playfair Display | Schriftart: 'Playfair Display', serif | Strichstärken: 400, 500, 600, 700, 800, 900 | Neu v5.2.0 für Überschriften | twt-font-playfair-display.png |
| Roboto | Schriftart: 'Roboto', sans-serif | Strichstärken: 300, 400, 500, 600, 700 | z.B. ThemeWare® Strong | twt-font-roboto.png |
| Roboto Slab | Schriftart: 'Roboto Slab', sans-serif | Strichstärken: 300, 400, 500, 600, 700 | z.B. ThemeWare® Bath | twt-font-roboto-slab.png |
| Sen | Schriftart: 'Sen', sans-serif | Strichstärken: 400, 500, 600, 700 | Neu v5.2.0 | twt-font-sen.png |
| Source Sans 3 | Schriftart: 'Source Sans 3', sans-serif | Strichstärken: 300, 400, 500, 600, 700 | z.B. ThemeWare® Living | twt-font-source-sans-3.png |
| Source Serif 4 | Schriftart: 'Source Serif 4', serif | Strichstärken: 300, 400, 500, 600, 700 | Neu v5.2.0 Serif, auch für Fließtext | twt-font-source-serif-4.png |
| Titillium Web | Schriftart: 'Titillium Web', sans-serif | Strichstärken: 300, 400, 600, 700 | z.B. ThemeWare® Lights | twt-font-titillium-web.png |
| Ubuntu | Schriftart: 'Ubuntu', sans-serif | Strichstärken: 300, 400, 500, 700 | z.B. ThemeWare® Outdoor | twt-font-ubuntu.png |
| Weiter Schriften folgen später... |
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.
Alle Schriften, die ThemeWare® mitliefert
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 – also auch in Navigation, Footer, Offcanvas oder USP-Bar, sofern dort dieselbe Schrift eingestellt ist. 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 |
- |
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.
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.
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:
ThemeWare® Wissensdatenbank => Fonts bzw. Schriften
Weiterführende Informationen
- Wissensdatenbank: Google Fonts
- Grundwissen: Schriftkonfiguration
- Einführung: Schriften konfigurieren
- Anleitung: Fonts lokal einbinden
- Anleitung: Fonts mit dem ThemeWare® Customizing Plugin lokal einbinden