If you want your website to look modern and professional, you should make sure that you use a consistent typeface on all pages and use the same colors for the same elements and fonts.
With page4 this is very easy. The headlines and the body text are stored directly in the design and all formatting is specified there.
If you use a content element heading, you can choose one of 4 styles (H1 to H4) and the appearance of the heading is controlled by the design fonts, where you can specify for each of these 4 formats how the font should look like.
If you create a content element Text and just write text there, the appearance of this text is also controlled by the design. You will find an area body text and you can define there how this body text should look like.
If you select text in the body text and link this text, the appearance of this link is also determined by the design. You have 2 areas in the design fonts, one for the link as such and one for the appearance that the link should have when a user moves the mouse over this link (hover).
So as long as you only use the Heading content element for headings and write all the text of your web page with the Text content element without any further formatting, you can be sure that your web page will look consistent and thus fulfill an important requirement to look professional.
Important: If you change the font formatting of the design fonts, for example by changing the formatting for the body text and selecting a different font family and font color there, then after saving all body text on the entire web page will automatically be displayed with the new settings, i.e. in a different font and font color. Formatting that you have made in the respective content element text, for example, individual words in bold or italics, will remain. Therefore, even if the text editor offers the possibility, you should use individual formatting only sparingly. Read more about this in the article on the content element Text.
If you change the design, all settings you made in the design font will be discarded and replaced by the settings in the new design. If you have been using a theme with a white background and black font and you change to a theme with a black background and white font, you will understand why it makes sense for the theme to provide the font information. You can always customize the design fonts with very little effort.
Make sure that the design of the headings is done in such a way that the H1 format - i.e. Heading 1 gets the largest font and generates extra attention. H2 should be slightly smaller and clearly different from H1. H3 should be a bit smaller still and well distinguished from H2, and H4 should be the smallest, but still larger than the body text. Choose a reasonable font that matches the body text. Often it looks very good if all headings use the same font family and possibly differ in color in addition to font size. The font family for the headings should go well with the body text. You can find information that helps to get listed better on Google in the article "Headings".
The most important thing is that your visitors can easily read the texts on your website. Make sure that the font is not too small for the text, the text color stands out well against the background and the spacing between the lines is large enough. Do not use too many font families and make sure that the fonts fit together harmoniously.
Why do I need design fonts?
A professionally designed website uses a consistent typeface. This means that the basic text consists of one font, font size and font color. The headlines have a uniform typeface depending on the weighting (H1 to H4) and the linking is designed the same everywhere.
So that you do not have to make the same format specifications for every text in the text editor, the fonts are controlled centrally by the design. All formatting is stored there.
Important: You are not allowed to overwrite these formattings manually in the text editor. So if you insert text just create a new text section and write your text without manually setting the font or font size. Then the text will be displayed as it is stored in the design.
Advantages of a central font design.
1) The typeface is consistent on all pages and your website becomes more professional.
2) If you change the design and your typeface should be changed as well, then you only need to adjust the formatting in one place and all texts will be displayed anew on the entire website.
3) You don't have to worry about the layout when writing, the design takes care of that.
Use Google Fonts
If you don't use a Google font, then your visitor must have the exact font you use installed on their computer. Otherwise, his browser will not be able to display this font and will use a substitute font instead. Of course, this will change the layout you want, and since fonts have different widths, this may result in completely different text wrapping.
Google Fonts are therefore a very good way to make sure that every visitor sees your page exactly as you see it on your computer.
Good to know: We do use Google Fonts, but all fonts are stored on our servers. If you use Google Fonts, no data will be forwarded to Google.
How to get to the design fonts
Function overview and settings
Currently there are the formats
Heading 1 = H1 in the content element Heading
Heading 2 = H2 in the content element Heading
Heading 3 = H3 in the Heading content element
Heading 4 = H4 in the Heading content element
Body text = text that you write with the Text content element without applying any formatting. Note text, such as in empty content elements, is displayed in the same formatting. Likewise, if you use the "p" tag in a content element HTML.
Link = A link that is created in the body text. Some of the formatting is taken from the body text. Therefore, less formatting is stored here.
Link:Hover = A link that is created in the body text. Part of the formatting is taken from the body text. So there is less formatting here, too. Here you define how the link should be displayed when a visitor moves the mouse over the link.
The dialog will be extended soon and as soon as this is done, you will find more detailed information here.
You can display all formats (headlines and body text) in any allowed size. But of course you should use font sizes of 30 px or more only for headlines. It is also good to consider the value of the headings. Heading 1 should be displayed largest, heading 2 smaller and heading 4 smallest.
You can set it to Normal or Bold. Depending on the font, the effect is more or less visible. This is due to the fact that for Google each font weight represents a font of its own and unfortunately you can't load thousands of font weights for speed reasons. Active is always the option with blue background.
Note: If a Google font has only one weight, the browser tries to make the font fatter, but it doesn't look very good.
To keep the individual lines completely apart, the line height must be at least as large as the font size. Depending on the font, this spacing may be a little less or a little more, since the typeface is sometimes slightly smaller than the specified font size. This is due to descenders and the fact that capitalized umlauts are usually a bit taller than normal capital letters. If you have a 20 px font, the line height should be at least 20 px. You have to add 20% to make the font readable, so 24 px is better to make it readable. You can set values between 10 px and 200 px. If you click on the trash, the line spacing is set automatically. Three strokes are displayed and if you change the font size, the line spacing will automatically increase as well. It is then always about 120% of the font size. Normally you should use the recycle bin and set an automatic value. Unless you want to have a lot of space between the lines.
To the right of the input fields you can see all fonts as a preview, so you have an immediate impression of how the fonts fit together and whether the sizes and line spacing are well chosen. You can either jump to the individual formats with the menu items on the left or by clicking on the font you want to change in the preview.
In addition, the font is usually also immediately displayed on your page, which you always have in view below the dialog.