Font configuration

In the ThemeWare® configuration you will find two font configuration fields (text fields of the type Font family) in tab "Layout" => block "Typography" - one in section "Text" and one in section "Headlines". This is where you configure the font for text and for headlines.

On top of that there are font selection fields (dropdowns) in various places, where you can choose for a particular element whether it should use the headline font or the text font.

In the Font family field you can enter fonts separated by commas, for example 'Inter', sans-serif. Several fonts are possible here in principle, and the browser reads them as a priority list. If "font 1" is not available, it tries "font 2", and so on.

Font family or webfont

Written in quotation marks is the font or webfont you want. In our example that is "Inter".

Special fonts and webfonts should always be written in quotation marks. With these fonts you cannot assume that they are installed on every device, so you have to make them available to your visitors.

To do that you either place them locally on your web server or import them through a third-party API (for example Google Fonts). You will find more on this further down in this article.

Default fonts

ThemeWare® already provides you with fonts that suit your theme. They are loaded directly from your web server, without any third-party API or tracking - you simply enter them in the Font family field.

Which fonts these are, which font weights they come with and what they look like is documented in the ThemeWare® manual:

https://docs.themeware.design/more-knowledge/fonts

ThemeWare® Manual => Fonts

Shopware 6 default fonts

In addition, Shopware 6 provides the font "Inter" by Rasmus Andersson. This font comes in the weights 400 (Regular), 600 (SemiBold) and 700 (Bold).

Web-safe fonts

Besides the default fonts you can also use so-called web-safe fonts. These are fonts that are already installed on almost every device and are therefore highly available. Examples would be "Arial", "Verdana", "Helvetica", "Courier New", "Consolas", "Georgia" or "Times New Roman".

You can enter such fonts without quotation marks. In this case you do not have to worry about making the font available to your visitors, because these fonts are already installed on most devices.

You can also "stack" such fonts and enter more than one to be on the safe side. That looks like this: Helvetica, Arial

Fallback fonts

The actual font or webfont is followed by a so-called "fallback font". In our example that is "sans-serif", meaning a font without serifs.

With such a generic font you give the browser the chance to pick a font that at least matches the type of the font you wanted, in case the actual font could not be loaded.

Generic fonts:
serif       > a font with serifs
sans-serif  > a font without serifs
cursive     > a font imitating handwriting
monospace   > a font in which all characters have the same width

So when you use a special font, you enter it first, in quotation marks. The browser then tries to load that font.

If that does not work (perhaps a browser blocks the font from loading), the fallback font is used instead - some "similar" system font.

Please note: It may well be that the shop looks perfectly fine in your own browser, because you have the font installed on your device.

But if you open the shop on a device that does not have the font installed - your smartphone, for instance - you will notice that the font is not displayed "correctly".

In that case check how the font is embedded, or use a web-safe font. You will find more on this in the "Tutorials" section.

Configuration options

An entry in the font field could therefore read 'Inter', sans-serif or 'Inter', Arial, sans-serif or Helvetica, Arial, sans-serif.

Font weight

In ThemeWare® you can define three font weights: "light", "normal" and "bold". These weights apply to the font for "Text" and to the font for "Headlines". So please check which weights are available in the fonts you chose and adjust your configuration accordingly.

Font weights:
300 = Light
400 = Regular
500 = Medium
600 = SemiBold
700 = Bold
800 = ExtraBold
900 = Black

It is advisable that both fonts (if you use two different ones) have the same weights available, in order to avoid display problems.

You can look up the available weights for Google webfonts at fonts.google.com - or you use the google-webfonts-helper tool.

You do not have to use three different weights. You can also configure all of them the same (for example Light: 400, Normal: 400 and Bold: 400) or use only two (for example Light: 400, Normal: 400 and Bold: 600).

Size adjustment

Not every font looks the same size at the same font size. The size adjustment scales a font without you having to touch a single font size. There are two fields, one each in the "Text" and the "Headlines" section.

This is how you proceed:

1. Enter a value in the Size adjustment field. The default is 100, meaning no adjustment - values from 75 to 125 are possible.
2. Save the theme configuration and check your shop. The width of labels grows along with the value, so look at buttons, badges and the navigation for labels that start to wrap.
3. Work your way up in small steps: from around 120 onwards, the lines of multi-line body text visibly move closer together.

Using your own fonts or webfonts (e.g. Google Fonts)

As mentioned above, special fonts and webfonts are not automatically present on every device your visitors use. In that case the browser would fall back to the fallback font.

For the font to be usable by your visitors' browsers, you have to make it available to them. Either you have the fonts imported through a third-party API (for example Google Fonts), or you store the fonts locally on your web server.

The local method can be slower than a third-party API, but it lets you avoid any tracking or data processing by an external provider - which matters for the GDPR.

Further information

• Introduction: how to configure fonts in your shop is explained in Configuring fonts
• Field types in the theme configuration
• Tutorial: Embedding fonts locally
• Tutorial: Importing Google Fonts
• Manual: Fonts - bundled fonts and reference values for the size adjustment