Typography

Overview

In this section, you will find everything related to the typeface of your online shop. Here, you can customize continuous text, headings, and links according to your preferences.

Configuration

Font Text

Here you can select the font for your body text. The font name must be enclosed in single quotation marks. The default font is ‘Open Sans’.

It is always recommended to end with system-ui, sans-serif or system-ui, serif separated by commas. This is the browser's fallback font if the actual font could not be loaded. Depending on whether you use a serif or sans-serif font, select the appropriate value.

---

Please note that the font you want to use must also be located on your server. It can be uploaded either manually or using an app from the Shopware Store. For data protection reasons, we do not recommend direct integration via a Google link. The default fonts available are: ‘Open Sans’, ‘Raleway’ and ‘Inter’.

Font Color

This is the font color used for your body text in the shop.

---

Variable: $sw-text-color

Font Heading

Here you can specify the font for your headings. The font name must be enclosed in single quotation marks. The default font is ‘Raleway’.

It is always recommended to end with a comma-separated list of system-ui, sans-serif, or system-ui, serif. This is the browser's fallback font if the actual font cannot be loaded. Depending on whether you are using a serif or sans-serif font, select the appropriate value.

---

Please note that the font you want to use must also be located on your server. It can be uploaded either manually or using an app from the Shopware Store. For data protection reasons, we do not recommend direct integration via a Google link. The default fonts available are: ‘Open Sans’, ‘Raleway’ and ‘Inter’.

Heading color

This is the font color used for your headings in the shop.

---

Variable: $sw-headline-color

Link Style

Das Theme bietet dir die Möglichkeit deine Links in unterschiedlichen Designs darzustellen. Diese wirken sich ins besondere auf den Hover-Effekt aus. Diesen kannst du dir bspw. auf der Produkt Detailseite am Hinweis "Preise inkl. MwSt. zzgl. Versandkosten" ansehen.

The theme offers you the option of displaying your links in different designs. These have a particular effect on the hover effect. You can see this, for example, on the product detail page in the note “Prices include VAT plus shipping costs.”

---

Underline:

Underline with animation:

Link Color

This is the font color used for your links in the shop.

---

Variable: $atl-link-color

Link Decoration Color

The link decoration color represents the color of the underlining of your links.

Contrast threshold

The contrast ratio determines when the brightness of the color changes from “dark” to “light.”

Acceptable values for Web Content Accessibility Guidelines (WCAG) 2.0 are 3, 4.5, and 7. This value calculates when a foreground color is displayed as “dark” or “light” on a background. For example, this is how the text color on a primary button is calculated.