Elements - Add and select fonts
Sitejet offers many different fonts that you can easily add to your project and use. In this article, we'll show you how to add more fonts to a website, customize them, and even upload your own.
Table of contents
Add more fonts to your website
You can easily build websites in Sitejet using our Website Builder (CMS) or the Website Generator. If you are not familiar with these yet, be sure to check out our overview of the Website Builder and description of the Website Generator.
To add a font, first open the font manager within the Website Builder by following these steps:
- Hover over the "Design" menu item at the top of the Website Builder
- Click the menu item "Fonts"
The font management menu will then open on the right side of your screen. Here, you can see the fonts already assigned to your project in "Selected fonts", as well as many additional fonts you can preview with the help of sample text by clicking "Available fonts".
You can change the sample text directly in the font manager to quickly and easily see how your desired text would look with this font. To do this, click on the sample text and enter your desired text. If you want to preview the new sample text for all fonts, you can click on the button labeled "Copy text to all previews".
Once you have chosen a font, a click on the plus symbol on the right will add the font to your project.
The selected font will now be displayed at the top and is available for your project. You can set the font for use as normal text ("Default font") and/or for the headings ("Special font") by default, by checking either box next to "Add font as".
You can also customize fonts added to your project by clicking on the orange underlined text to the right of the font name. This will open further options for the appearance of the font. In the text elements, only the font styles which you select here by ticking the box will be available.
In order to ensure the shortest possible loading times, care is taken so that as few scripts and files as possible are loaded, including fonts. Therefore, fonts must be added individually to the project. It is recommended to remove unused fonts from the project by clicking the garbage can icon on the right side of the font. The same applies to the font styles: Only the styles you actually use on the website should be selected.
Of course, there are detailed settings available for each font. To access and change these, simply:
- Hover over the "Design" menu on the top of the Website Builder
- Select "Theme" from the drop-down menu
You will find many design options on the menu which appears on the right, and you can also, for example, customize how the font displayed on different devices there.
If you want to use a font that is not listed under "Available fonts", you can upload your own by clicking "Upload Fonts" and picking the file from the media manager or uploading the file from your computer.
We recommend using the WOFF or WOFF2 formats because these are optimized for the use on modern browsers. If only a different format is available, you can use online tools such as Font Squirrel Webfont Generator to convert to web font formats including WOFF. In general, however, .ttf, .eot and.svg formats are also supported.
Some fonts may only be used with an appropriate license. In order to ensure a smooth web presence, find out in advance whether you are allowed to use a particular font and what conditions its use is subject to.
Once you've added fonts to your website, they are available in all elements that display text, unless their font is set by preset properties. When in the edit mode of the text box, you can select a font from the drop-down which appears after clicking on the "A" icon. You can see more details in the image below:
Become a part of our Community!
Exchange ideas with other web designers about current developments, tips and tricks and show your favorite sites. Get advice and talk to us about possible features you would like to see on Sitejet. Here you can go directly to our community. If you need help with your Slack account, please e-mail us to firstname.lastname@example.org .