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 fonts to a website, customize them, and upload your own.

Add and select fonts to your website

To add a font to your website, open the font manager in the website builder:

1. Click Theme in the left sidebar
2. Select Fonts
   

The font manager opens next to the sidebar. Under Selected fonts, you'll see the fonts that are already assigned to your project. Expand Available fonts (Google Fonts) to browse all the others, each shown with a sample text preview.

To find a font faster, use the Search field or narrow the list down with the Category, Sort by, and Font weights filters.

Not sure which fonts to pick? At the bottom of the panel, you'll find font recommendations for text and headlines. Click Generate and Sitejet suggests a matching pair for your website.

The Google Fonts on websites built with Sitejet run through a proxy that removes not only the IP address but also all other identifying headers (language, user agent, referrer, and so on). This applies to the font manager as well as to manual integrations in CSS (@import) and HTML. In short: fonts are delivered through Sitejet, not directly via the Google API.

Once you've chosen a font, click the plus symbol next to its name to add it to your project.

The font then appears at the top under Selected fonts and is available in your project. You can set default fonts for body text (Default) and headlines (Headlines) by checking the respective box.

You can also customize a font you've added by clicking the gear icon next to its name. This opens further options for the appearance of the font. In text elements, only the font styles you tick here will be available.

Customize fonts

Beyond picking a font, you can set how text looks across your whole website. Click Theme in the left sidebar, open Global Styles, and go to the Text tab.

The Text section covers body text. Switch between the Standard, Bold, and Links tabs to style each one separately. For each, you can adjust font color, font, font size, line height, font weight, letter spacing, font style (italic, underline), text transform (Tt / TT / tt), and text alignment.

The Headlines section works the same way for headings, with the same set of options. Use the tabs to edit H1 / Textlogo through H6 individually, or select All to change every headline level at once.

Everything you set here becomes the global default for the whole website, so a change applies everywhere at once instead of element by element. Individual elements can still override it: select a text or headline element on the page and adjust its font, size, weight, and so on directly in the element settings. The global defaults stay untouched, and only that one element changes.

By switching the viewport in the top bar (desktop, tablet, mobile), you can also set different font sizes per device.

You can also select a text element on the page and click Edit theme in the element panel to jump straight to these global settings.

Upload fonts

If you want to use a font that isn't listed under Available fonts (Google Fonts), expand Upload fonts. Drag a file into the upload area, click to choose a file from your computer, or click select a file from Files to pick one from the Files manager.

We recommend WOFF or WOFF2, since these formats are optimized for modern browsers. If your font is only available in another format, you can convert it with an online tool such as the Font Squirrel Webfont Generator. In general, .ttf, .eot, and .svg files are supported as well.

Some fonts may only be used with an appropriate license. To avoid problems later, check in advance whether you're allowed to use a particular font and what conditions apply.

Select fonts

Once you've added fonts to your website, they're available in every element that displays text, unless the font is set by preset properties. In the edit mode of a text element, click the A icon in the toolbar and pick a font from the drop-down. The fonts you added to the project appear below the standard system fonts (Arial, Georgia, Impact, Tahoma, Times New Roman, Verdana).

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.

Back to the top