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 & Shops 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.

Die Grafik zeigt einen vordefinierten Schriftstil, bei dem die Schriftart “BalooChettan” für Überschriften und “SourceSerifPro” für Absätze verwendet wird.
In this example picture, the font style BalooChettan is used for headings, and SourceSerifPro for paragraphs.

Customised font styles

With a custom font style, you can customise the website elements heading, paragraph, and button. Custom font styles are saved automatically and can be customised 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 > Customise 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 customisations 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.

Customised headings

The heading element can be customised for six heading sizes. These different levels (H1 to H6) can be freely selected when designing your website. The following customisation 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.
  • Capitalisation: All letters in the heading are capitalised (AA), normal (Aa) or small (aa), regardless of the input.
  • Reset font: Resets all adjustments of the heading text to the initial state.

Customised paragraphs

The following customisation 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.
  • Capitalisation: All letters in the paragraph are capitalised (AA), normal (Aa), or small (aa), regardless of the input.
  • Reset: Resets all adjustments of the paragraph element to the initial state.

Customised buttons

The following customisation 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.
  • Capitalisation: Regardless of the input, all letters on the button are capitalised (AA), normal (Aa) or small (aa).
  • Reset font: Resets all adjustments of the button to the initial state.