Why do the fonts in the construction kit and on the website differ?

When you add fonts to your website, it can sometimes happen that the fonts look different in the Website Builder, in the preview and on the published website. Each added font has a variety of styles. So it is common that there are not only bold or italic, but several styles.

In our example, you can see that the font Poppins knows more styles than just bold and italic. If you have now ticked all font styles, it is not exactly defined which bold you prefer: Halbfett 600, Extra Fett 800 oder Schwarz900? However, if you select only four font styles, you know exactly which style variants you are using.

• Regularly you use Regular 400
• For regular italic you use Regular 400 Italic
• For bold you use Bold 700
• For bold italic you use Bold 700 Italic

In the Website Builder, all font styles are always loaded at the same time. In the preview or the published website, only those that you have selected in the Edit fonts window are loaded.

You can edit fonts as follows

1. Under Settings select the function Styles
2. Select the template you want to edit from the list on the left
3. Go for Font and click the Pencil for Editing
4. Select one of the existing fonts or click + New font
5. Search and select a suitable font
6. Select the desired font styles according to the instructions above

Please note: Some fonts only have one font style.

Fonts without bold and italic styles

There are fonts without the bold and italic styles. In these cases, bold formatting simply makes each letter a fixed number of pixels thicker. With italics, the font is inclined by a defined angle. In this way, the bold and italic font styles are merely simulated. For fonts such as Poppins (example above), the individual styles were designed by hand and not modeled by logic.