# Configuration

## Responsive scaling

***

### Font size in % @Phone (<576px)

**Field type**:\
Number field

**Example value**:\
`80`

**Path to the configuration**:\
Tab "Layout" => Block "Typography" => Section "Responsive scaling"

**Technical name**:\
`twt-font-size-html-xs`

{% hint style="info" %}
With this configuration, you can reduce the default font size in the corresponding viewport as a percentage.

For accessibility reasons, please note that the font should not be smaller than 16px.

**Example**: 80
{% endhint %}

***

### Font size in % @Phone (landscape) (≥576px)

**Field type**:\
Number field

**Example value**:\
`90`

**Path to the configuration**:\
Tab "Layout" => Block "Typography" => Section "Responsive scaling"

**Technical name**:\
`twt-font-size-html-sm`

{% hint style="info" %}
With this configuration, you can reduce the default font size in the corresponding viewport as a percentage.

For accessibility reasons, please note that the font should not be smaller than 16px.

**Example**: 90
{% endhint %}

***

### Font size in % @Desktop (≥1200px)

**Field type**:\
Number field

**Example value**:\
`100`

**Path to the configuration**:\
Tab "Layout" => Block "Typography" => Section "Responsive scaling"

**Technical name**:\
`twt-font-size-html-xl`

{% hint style="info" %}
With this configuration, you can reduce the default font size in the corresponding viewport as a percentage.

For accessibility reasons, please note that the font should not be smaller than 16px.

**Example**: 100
{% endhint %}

## Text

***

### Fonttype

**Field type**:\
Font family

**Example value**:\
`'Inter', sans-serif`

**Path to the configuration**:\
Tab "Layout" => Block "Typography" => Section "Text"

**Technical name**:\
`sw-font-family-base`

{% hint style="info" %}
Theme fonts are loaded automatically from your server. Other fonts must be added individually.

For more information about the font configuration, watch our video tutorial.

**Example**: 'Inter', sans-serif
{% endhint %}

***

### Text colour

**Field type**:\
Color picker

**Example value**:\
`#111111`

**Path to the configuration**:\
Tab "Layout" => Block "Typography" => Section "Text"

**Technical name**:\
`sw-text-color`

{% hint style="info" %}
ThemeWare® variables ($twt-...) are currently not possible in this field.

Variable: **$sw-text-color**
{% endhint %}

***

### Font size

**Field type**:\
Number field

**Example value**:\
`16`

**Path to the configuration**:\
Tab "Layout" => Block "Typography" => Section "Text"

**Technical name**:\
`twt-font-size-base`

## Headlines

***

### Fonttype

**Field type**:\
Font family

**Example value**:\
`'Inter', sans-serif`

**Path to the configuration**:\
Tab "Layout" => Block "Typography" => Section "Headlines"

**Technical name**:\
`sw-font-family-headline`

{% hint style="info" %}
Theme fonts are loaded automatically from your server. Other fonts must be added individually.

For more information about the font configuration, watch our video tutorial.

**Example**: 'Inter', sans-serif
{% endhint %}

***

### Text colour

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Layout" => Block "Typography" => Section "Headlines"

**Technical name**:\
`sw-headline-color`

{% hint style="info" %}
ThemeWare® variables ($twt-...) are currently not possible in this field.

Variable: **$sw-headline-color**
{% endhint %}

***

### Font size (h1)

**Field type**:\
Number field

**Example value**:\
`36`

**Path to the configuration**:\
Tab "Layout" => Block "Typography" => Section "Headlines"

**Technical name**:\
`twt-font-size-h1`

***

### Font size (h2)

**Field type**:\
Number field

**Example value**:\
`28`

**Path to the configuration**:\
Tab "Layout" => Block "Typography" => Section "Headlines"

**Technical name**:\
`twt-font-size-h2`

***

### Font size (h3)

**Field type**:\
Number field

**Example value**:\
`24`

**Path to the configuration**:\
Tab "Layout" => Block "Typography" => Section "Headlines"

**Technical name**:\
`twt-font-size-h3`

***

### Font size (h4)

**Field type**:\
Number field

**Example value**:\
`20`

**Path to the configuration**:\
Tab "Layout" => Block "Typography" => Section "Headlines"

**Technical name**:\
`twt-font-size-h4`

***

### Font size (h5)

**Field type**:\
Number field

**Example value**:\
`16`

**Path to the configuration**:\
Tab "Layout" => Block "Typography" => Section "Headlines"

**Technical name**:\
`twt-font-size-h5`

***

### Font size (h6)

**Field type**:\
Number field

**Example value**:\
`14`

**Path to the configuration**:\
Tab "Layout" => Block "Typography" => Section "Headlines"

**Technical name**:\
`twt-font-size-h6`

## Links

***

### Link colour

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Layout" => Block "Typography" => Section "Links"

**Technical name**:\
`twt-link-color`

{% hint style="info" %}
Select the desired colour for general links in the Storefront.

**Beta**: This configuration is in a testing phase, feel free to give it a try.

**Note**: The hover colour is also generated from this colour.
{% endhint %}

## Font weight

***

### Font weight (light)

**Field type**:\
Number field

**Example value**:\
`400`

**Path to the configuration**:\
Tab "Layout" => Block "Typography" => Section "Font weight"

**Technical name**:\
`twt-font-weight-light`

{% hint style="info" %}
Select the desired font weight:\
100 = Thin (Hairline)\
200 = Extra Light (Ultra Light)\
**300 = Light**\
400 = Normal (Regular)\
500 = Medium\
600 = Semi Bold (Demi Bold)\
700 = Bold\
800 = Extra Bold (Ultra Bold)\
900 = Black (Heavy)\
950 = Extra Black (Ultra Black)
{% endhint %}

***

### Font weight (normal)

**Field type**:\
Number field

**Example value**:\
`400`

**Path to the configuration**:\
Tab "Layout" => Block "Typography" => Section "Font weight"

**Technical name**:\
`twt-font-weight-normal`

{% hint style="info" %}
Select the desired font weight:\
100 = Thin (Hairline)\
200 = Extra Light (Ultra Light)\
300 = Light\
**400 = Normal (Regular)**\
**500 = Medium**\
600 = Semi Bold (Demi Bold)\
700 = Bold\
800 = Extra Bold (Ultra Bold)\
900 = Black (Heavy)\
950 = Extra Black (Ultra Black)
{% endhint %}

***

### Font weight (bold)

**Field type**:\
Number field

**Example value**:\
`600`

**Path to the configuration**:\
Tab "Layout" => Block "Typography" => Section "Font weight"

**Technical name**:\
`twt-font-weight-bold`

{% hint style="info" %}
Select the desired font weight:\
100 = Thin (Hairline)\
200 = Extra Light (Ultra Light)\
300 = Light\
400 = Normal (Regular)\
500 = Medium\
**600 = Semi Bold (Demi Bold)**\
**700 = Bold**\
800 = Extra Bold (Ultra Bold)\
900 = Black (Heavy)\
950 = Extra Black (Ultra Black)
{% endhint %}

## Google Fonts

***

### Import Google Fonts

**Field type**:\
Select

**Available values**:\
• no\
• yes

**Example value**:\
`no`

**Path to the configuration**:\
Tab "Layout" => Block "Typography" => Section "Google Fonts"

**Technical name**:\
`twt-google-font-import`

{% hint style="info" %}
Select whether Google Fonts should be loaded via the Google Fonts API (yes) or not (no).

**Important:** Before using font APIs such as Google Fonts, be sure to obtain legal advice regarding the General Data Protection Regulation (GDPR).
{% endhint %}

***

### Font weight for Google Fonts (Text)

**Field type**:\
Text field

**Example value**:\
`400,600`

**Path to the configuration**:\
Tab "Layout" => Block "Typography" => Section "Google Fonts"

**Technical name**:\
`twt-font-family-base-font-weight`

{% hint style="info" %}
Select the desired font weights:\
100 = Thin (Hairline)\
200 = Extra Light (Ultra Light)\
300 = Light\
400 = Normal (Regular)\
500 = Medium\
600 = Semi Bold (Demi Bold)\
700 = Bold\
800 = Extra Bold (Ultra Bold)\
900 = Black (Heavy)\
950 = Extra Black (Ultra Black)

**Example**: 400,600
{% endhint %}

***

### Font weight for Google Fonts (Headlines)

**Field type**:\
Text field

**Example value**:\
`400,600`

**Path to the configuration**:\
Tab "Layout" => Block "Typography" => Section "Google Fonts"

**Technical name**:\
`twt-font-family-headline-font-weight`

{% hint style="info" %}
Select the desired font weights:\
100 = Thin (Hairline)\
200 = Extra Light (Ultra Light)\
300 = Light\
400 = Normal (Regular)\
500 = Medium\
600 = Semi Bold (Demi Bold)\
700 = Bold\
800 = Extra Bold (Ultra Bold)\
900 = Black (Heavy)\
950 = Extra Black (Ultra Black)

**Example**: 400,600
{% endhint %}

## Iconset

***

### Iconset

**Field type**:\
Select

**Available values**:\
• default (Shopware 6)\
• ThemeWare® One\
• ThemeWare® One solid (new)\
• ThemeWare® One thin (new)\
• ThemeWare® Light\
• ThemeWare® Six (new)\
• ThemeWare® Six solid (new)\
• Boxicons\
• Boxicons (variation)\
• Boxicons solid\
• Boxicons solid (variation)\
• Font Awesome v5\
• Font Awesome v5 (variation)\
• Font Awesome v6\
• Font Awesome v6 (variation)\
• Feather\
• Material Icons\
• Shopware 6

**Example value**:\
`default (Shopware 6)`

**Path to the configuration**:\
Tab "Layout" => Block "Typography" => Section "Iconset"

**Technical name**:\
`twt-iconset`

{% hint style="info" %}
Here you can choose between different iconsets.

Individual icons can be selected with separate configuration fields.

**Note:** With the "default" iconset, the icons are not modified and cannot be changed.
{% endhint %}

***

### Icon: Shopping cart

**Field type**:\
Select

**Available values**:\
• Shopping bag (default)\
• Shopping basket\
• Shopping cart

**Example value**:\
`Shopping bag (default)`

**Path to the configuration**:\
Tab "Layout" => Block "Typography" => Section "Iconset"

**Technical name**:\
`twt-icon-cart`

{% hint style="info" %}
Replaces the default icon from the cart button in the header if the icon is available in the selected iconset.

**Note:** With the "default" iconset, the icon is not changed.
{% endhint %}

***

### Icon: Newsletter

**Field type**:\
Select

**Available values**:\
• Arrow right (default)\
• Envelope\
• Paper plane

**Example value**:\
`Envelope`

**Path to the configuration**:\
Tab "Layout" => Block "Typography" => Section "Iconset"

**Technical name**:\
`twt-icon-newsletter-submit`

{% hint style="info" %}
Replaces the default icon from the submit button in the newsletter widget if the icon is available in the selected iconset.

**Note:** With the "default" iconset, the icon is not changed.
{% endhint %}

***

### Icon: Benefits

**Field type**:\
Select

**Available values**:\
• Checkmark (default)\
• Heart\
• Star\
• Trophy

**Example value**:\
`Checkmark (default)`

**Path to the configuration**:\
Tab "Layout" => Block "Typography" => Section "Iconset"

**Technical name**:\
`twt-icon-benefits`


---

# 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.themeware.design/manual/layout/typography/configuration.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.