# 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`