Customize fonts in your MyWebsite Now project
Valid for MyWebsite Now.
The choice of fonts is crucial for the overall appearance and functionality of your website. Fonts are important for readability, structure, and target group appeal, among other things. This article explains how to use different fonts for your MyWebsite Now project. Changes are possible for headings, paragraphs and buttons.
Opening the MyWebsite Now editor
- Log in to your IONOS account.
- Click on the Websites & Stores tile. If you have multiple website contracts, click Manage Website in the appropriate tile. The Presence Suite for this project opens.
- In the Presence Suite menu bar, select Website Editor. MyWebsite Now opens in a new window.
Predefined font styles
MyWebsite Now has already prepared some font styles for immediate use on your website. To select one of these predefined font styles:
In the MyWebsite Now editor, click on Design > Font.
In the Font field, select one of the font sets displayed. To make your selection easier, the font used for the heading and paragraph is displayed for each font style. The preview view of the MyWebsite Now editor is updated automatically.
If necessary, adjust the size of the font style with three options: Small (S), Medium (M), Large (L)
Click on Publish to apply the settings to your website.
Customized font styles
With a custom font style, you can customize the website elements heading, paragraph, and button. Custom font styles are saved automatically and can be customized or deleted at a later date. You will find your custom font styles at the end of the list of predefined font styles.
- In the MyWebsite Now editor, click on Design > Font > Customize font style .
- Select the font family for each possible element type (headings, paragraphs, and buttons) by setting the desired font in the respective selection box.
- Click on the Custom ... link directly below the selection field to make detailed customizations to the element (heading, paragraph, button). You can find out which options are available to you in the following sections of this article.
- Click on Publish to apply the settings to your website.
Note
You activate a specific font style for your website by clicking on it in the font style list. The active font style is highlighted with a blue tick and a dark background.
Customized headings
The heading element can be customized for six heading sizes. These different levels (H1 to H6) can be freely selected when designing your website. The following customization options are available:
- Font family for headings: Available fonts.
- Font size: Adjustable between 4 and 220.
- Font weight: Normal, Medium, Bold. The availability of these weights depends on the selected font.
- Spacing between letters: Adjustable between -2 and 50 (pixels).
- Line height: Can be set between 0 and 10.
- Capitalization: All letters in the heading are capitalized (AA), normal (Aa) or small (aa), regardless of the input.
- Reset font: Resets all adjustments of the heading text to the initial state.
Customized paragraphs
The following customization options are available for the paragraph element:
- Paragraph font family: Available fonts.
- Font size: Adjustable between 4 and 220.
- Font weight: Normal, Medium, Bold. Availability depends on the selected font.
- Spacing between letters: Adjustable between -2 and 50 (pixels).
- Line height: Can be set between 0 and 10.
- Capitalization: All letters in the paragraph are capitalized (AA), normal (Aa), or small (aa), regardless of the input.
- Reset: Resets all adjustments of the paragraph element to the initial state.
Customized buttons
The following customization options are available for the button element:
- Font family for buttons: Available fonts.
- Font size: Adjustable between 4 and 220.
- Font weight: Normal, Medium, Bold. The availability of these weights depends on the selected font.
- Spacing between letters: Adjustable between -2 and 50 (pixels).
- Line height: Can be set between 0 and 10.
- Capitalization: Regardless of the input, all letters on the button are capitalized (AA), normal (Aa) or small (aa).
- Reset font: Resets all adjustments of the button to the initial state.