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
This video was recorded in the old UI. We will update this video soon.
Add more fonts to your website
To add a font to your website, open the font manager in the website builder by following these steps:
- Click on "More" in the top right corner
- Select the menu item "Fonts"
The font manager 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".
Please note that the fonts in the font manager are made available via a Google API. Therefore, we advise you to inform yourself about a GDPR-compliant integration of the fonts on the website. It may be necessary to ask for the consent of the website visitors beforehand or to store the fonts locally.
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 default fonts for normal text (Default) and/or for the headlines (Headlines) by checking the respective box.
You can also customize fonts added to your project by clicking on the settings icon. 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 click on Design in the top navigation and the Text tab will already be open. Here you can adjust font options for texts and headlines. By adjusting the viewport in the top navigation you can also define the font size for tablet and mobile.
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. You can join the Sitejetters community here.