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
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
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
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
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
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
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
Theme fonts are loaded automatically from your server. Other fonts must be added individually.
Which fonts are bundled is listed in the Google Fonts section, how font configuration works is explained in the knowledge base.
Example: 'Inter', sans-serif
Size adjustment
Field type:
Number field
Example value:100
Possible values:75 to 125
Path to the configuration:
Tab "Layout" => Block "Typography" => Section "Text"
Technical name:twt-font-family-base-size-adjust
Scales the font selected above without changing any font sizes. 100 = no adjustment. The value belongs to the font itself, so it applies everywhere that font is used in your shop. Does not apply to Inter (loaded by Shopware), the Google Fonts import or your own fonts.
The adjustment only scales the letters, not the areas around them. A button or a badge keeps its height, because the line height is derived from the font size and that stays unchanged. So the text grows while the distance to the edge shrinks.
The width does grow along with it. After a change, check buttons, badges and the navigation for labels that start to wrap.
From around 120 onwards, the lines of multi-line body text visibly move closer together, because the line spacing stays unchanged as well.
Text colour
Field type:
Color picker
Example value:#111111
Path to the configuration:
Tab "Layout" => Block "Typography" => Section "Text"
Technical name:sw-text-color
ThemeWare® variables ($twt-...) are currently not possible in this field.
Variable: $sw-text-color
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
Theme fonts are loaded automatically from your server. Other fonts must be added individually.
Which fonts are bundled is listed in the Google Fonts section, how font configuration works is explained in the knowledge base.
Example: 'Inter', sans-serif
Size adjustment
Field type:
Number field
Example value:100
Possible values:75 to 125
Path to the configuration:
Tab "Layout" => Block "Typography" => Section "Headlines"
Technical name:twt-font-family-headline-size-adjust
Scales the font selected above without changing any font sizes. 100 = no adjustment. The value belongs to the font itself, so it applies everywhere that font is used in your shop. Does not apply to Inter (loaded by Shopware), the Google Fonts import or your own fonts.
The adjustment only scales the letters, not the areas around them. A button or a badge keeps its height, because the line height is derived from the font size and that stays unchanged. So the text grows while the distance to the edge shrinks.
The width does grow along with it. After a change, check buttons, badges and the navigation for labels that start to wrap.
From around 120 onwards, the lines of multi-line body text visibly move closer together, because the line spacing stays unchanged as well.
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
ThemeWare® variables ($twt-...) are currently not possible in this field.
Variable: $sw-headline-color
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
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.
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
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)
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
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)
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
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)
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
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).
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
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
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
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
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
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.
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
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.
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
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.
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