The Website Editor 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 fonts to your website
To manage the fonts on your website, open the Fonts Manager in the editor 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".Important: The Google Fonts in the websites are run through a proxy that removes not only the IP address but also all other identifying headers (language, user agent, referrer, etc.). This includes the native function in the Fonts Manager, as well as manual integrations in CSS (@import) and HTML (<link>). In short: Fonts are provided through us and not directly via Google API.
You can change the sample text directly in the Fonts Manager to quickly and easily see how your desired text would look with this font. To do this, click on the sample text "The quick brown fox jumps over the lazy dog" and replace it with your 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, we try to use and thus load as few scripts and files as, including fonts. Therefore, fonts must be added individually to the project. It is recommended to remove unused fonts from the project by clicking the trash 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 the global font options for texts and headlines that will be applied as default everywhere on the website. 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 respective font file from Files or uploading the file from your computer.
We recommend using the WOFF or WOFF2 formats because these are optimized for the use of 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 a license, so we recommend checking 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 other properties. When in the edit mode of the text box, you can select a font from the dropdown which appears after clicking on the "A" icon. You can see more details in the image below: