# 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

<figure><img src="/files/1jKGS20M8ZtIQdgYHldB" alt=""><figcaption></figcaption></figure>

<details>

<summary>Font Text</summary>

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’.

</details>

<details>

<summary>Font Color</summary>

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

***

[Variable:](/en/academy/technical-terms/variable.md) `$sw-text-color`

</details>

<details>

<summary>Font Heading</summary>

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’.

</details>

<details>

<summary>Heading color</summary>

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

***

[Variable:](/en/academy/technical-terms/variable.md) `$sw-headline-color`

</details>

<details>

<summary>Link Style</summary>

Das Theme bietet dir die Möglichkeit deine Links in unterschiedlichen Designs darzustellen. Diese wirken sich ins besondere auf den [Hover-Effekt](/en/academy/technical-terms/hover-effekt.md) aus. Diesen kannst du dir bspw. auf der [Produkt Detailseite](/en/academy/technical-terms/product-detail-page.md) 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](/en/academy/technical-terms/hover-effekt.md). You can see this, for example, on the [product detail page](/en/academy/technical-terms/product-detail-page.md) in the note “Prices include VAT plus shipping costs.”

***

Underline:

<img src="/files/BzeOjDGnzLdOEJ6b96Wm" alt="Katana" data-size="original">

Underline with animation:

<img src="/files/8UW4POO0btYz03TiBmKu" alt="Bonsai" data-size="original">

</details>

<details>

<summary>Link Color</summary>

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

***

[Variable:](/en/academy/technical-terms/variable.md) `$atl-link-color`

</details>

<details>

<summary>Link Decoration Color</summary>

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

</details>

<details>

<summary>Contrast threshold</summary>

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.

<img src="/files/fmNOuFmENMfkTzD9cOfs" alt="" data-size="original">

</details>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.atloss.de/en/theme-configuration/general/typography.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.