Create Websites with CHEETAH
Texts and the organization of texts on web pages (2)
Hn - Set font attributes
The setting area for the header fonts (and the section font) can be found in the main menu of the web page editor under the "A" button in its toolbar:
Here you can configure the header attributes H1 to H6 as well as the default section text (P = text paragraph) for both the desktop variant and the smartphone variant. By the way, every change you make here will also be displayed simultaneously on the web page in the editor (try it out!).
Each type of headline has its own block in the settings dialog, which starts with a font sample (corresponds to the desktop variant in terms of font size) and offers setting options for font type, font size (desktop, smartphone) and font color below it.
After you have thought about which fonts best suit your planned web page, you should configure the headings accordingly in the dialog presented here. Later, when formatting the web texts, if you resist the temptation to actively use the formatting commands offered in the text editor - or in other words - use only the native H1 to H6 - headings and the P attribute, then changes - as already mentioned - in this dialog will instantaneously affect the texts of the entire web page. This means that you can later examine the direct effect on the appearance of the web page simply by changing the font attributes in this dialog.
Handling the transfer of fonts to the web page in the editor is ultimately quite simple again. In the side menu, switch to the "New" and "Elements" sections and open the "Text" category there. You will then see a list of all the header templates as well as the text section template in the form you have previously set and you can then, as usual, simply select one of the templates with the mouse and then drag'n drop it into the web page. And now all you need to do is replace the default text with your own.
Tip: Prepare longer texts beforehand in a text editor (e.g. Wordpad) and then paste them via the clipboard. However, you can also use placeholder texts first in the design phase, which you then exchange later. For this purpose, there are some well-suited Chrome browser extensions, such as the "Lorem ipsum Generator"…
Integrate and use your own fonts
The Cheetah website editor already provides a larger number of royalty-free fonts. But often - e.g. to ensure the corporate design of a website - you need fonts that are not available by default. In such a case, however, there is the possibility to install externally purchased fonts. How exactly this works in "Cheetah" will be briefly explained below.
The first question that comes up when you see a font on a web page that you'd like to use yourself is, "What font is this? What is its name?". Because that's the information you need when you want to search the web for specific fonts to use yourself. Of course, the same is true when a customer asks for very specific fonts for their website, but in almost all cases can't tell you what their names are. But there is a remedy. With the Chrome extension "What Font?" you can easily find out the font names used on a web page as well as its attributes. You can find the mentioned extension in the Google Chrome App Store - and you should also install it in your Chrome browser right away.
The handling of this browser extension is simple and intuitive. To do this, go to the website whose fonts you want to determine. Then click on the "WhatFont" icon on the extension list in the Chrome browser and if you now touch a font on the web page with the mouse, the name of the font will be displayed as a hint. But that's not all. If you now perform a mouse click, a small window opens with detailed information about the font (here "Proxima-Nova"):
Tip: You can select the information that interests you in the small window with the mouse and then copy it to the clipboard. This is particularly useful if you want to copy the font color, for example.