Elements - Add and Select Fonts
To add webfonts to your site simply use the integrated Font Manager:
Here you can either browse a huge variety of webfonts (provided by Google Fonts) or upload your own to be embedded into your website. We recommend uploading WOFF and WOFF2 formats. Should you have another format available you can use the Font Squirrel Webfont Generator to convert fonts to Webfont formats (such as WOFF).
Preview every font with your own text by simply changing it. Use the copy icon (see the red circle below) to apply your preview text to all previews:
By default, selected fonts will be loaded with Regular font weight. To enable different weights or even languages, use Options to select all needed weights:
Use provided checkboxes to use a selected font as your default font or special font:
You can also choose the selected fonts in the text editor:
Important Notice: Every selected font needs to be downloaded by visitors, so try to keep the number of selected fonts and chosen weights as low as possible (2-3)
Give a short summary of what this article is about. After that follows the content list. This article also serves the purpose to show you how to style articles - so please read it carefully.
In tech-heavy articles we provide a "Basic Knowledge" section coverin basic things the reader should know about before reading this article. Depending on how much the reader needs to know rather reference to other articles (if they exist) instead of writing everything again.
For the correct formating you will have to edit the underlying code from time to time. To be able to see the HTML code you need to click the "</>"-symbol in the format panel on the top of this article.
The content list is presented in a "<section>"-tag. The links to headlines are wrapped in a "<h4>"-tag as well as a "<a>"-tag which points to the ID of the respective headline. To avoid typos, open the template article and copy it instead of writing a new article from scratch.
Due to a bug in Helpscout you might have to write something in the new article first before being able to paste other text in it. To ensure the correct format please go to the code-view by clicking the "</>"-symbol and copy everything from the template article over to the new article. Remember to type something in the normal view first.
The seperator line is set with a "<hr>"-tag after each section.
Then the article-related sections follow.
Within sections pictures help to explain specific steps more easily. When describing the way to specific points put button- and link-names in quote marks (").
Example: Click "Registrieren", to register a new domain or transfer an already existing domain hosted by another provider by using an auth-code.
If multiple steps are necessary use a numbered list to emphasize the oreder.
- Click the list-symbol (no quote marks, since it is a symbol, not the actual link text) in the format panel
- Then choose the ordered list for steps or an unordered list for a general recap of things
- Helpscout automatically sets the first list entry
- If its possible to get to a specific point through a link provide that link as a clickable link
Headlines are wrapped by a "<h1>"-Tag and have destinct, speaking IDs (so don't use "1","2","3", etc.). This way we can use the ID in the link we provide to the customer to reference a specific section instead of just the article. IDs are not allowed to have whitespaces in them.
As a small recap:
- Headlines are wrapped "<h1>"-tags
- Each headline has a destinct, speaking ID
- IDs are not allowed to have whitespaces in them
In addition to that follow these points:
- Every list entry ALWAYS starts with a capital letter
- Use " instead of '
- When using technical terms write them in bold font
- This can help SEO and
- It's easier for us to find the term once we have an article about it and want to link to it
- keyboard keys are written as "[Ctrl]"
In some help articles you can find warnings, error messages, etc. We avoid negative wording at all times. Instead of using sentences like "Warning: This might delete the whole internet!" better write
" Tip: Correct settings ensure a smooth experience."
(important is the " Tip:" in the beginning of the sentence and having the tip in its own).
Hints for potential problems are given in such blue boxes - with positiv wording of course.