How to change the fonts on your site

In TeleportHQ, you change the font of one piece of text by selecting it and picking a font in the right panel under Text Style → Font Family. To change the font across your whole site, edit the default text style in the Design Language panel's Text tab. In a site the TeleportHQ AI built, the heading and body fonts are also saved as two CSS variables on the Vars tab.

Before you start#

• The Font Family list offers system fonts, 12 ready-to-use Google fonts, and every font already added to your project. To use any other font, add it first:
  • How to add Google Fonts
  • How to upload your own fonts

Change the font of one element#

1. On the canvas, select the text. For example, a section heading.
2. In the right panel, on the Visual tab, find the Text Style section.
3. Click Font Family.
4. Pick a font from the list, or type its name and pick it. For example, Poppins.
5. Optional: in Font Weight, pick a weight such as 700 - Bold. The list shows only the weights that font has.

When Font Family shows a grey name in italics, the text gets its font from somewhere else, for example a CSS class. Point at it to see where. A name such as font-family-heading means the font comes from a CSS variable (see "In a site the AI built" below).

If the Text Style section shows a name, for example Text Style - Content, the text is linked to a text style and the font fields are hidden. Change the style instead (next section), or see How to apply a text style to text.

Change the font across your whole site#

TeleportHQ text styles are reusable font settings. The default text style, marked Default in the Text tab, applies to all text elements that don't have their own font. In new projects it's called Content. In sites the AI built, it's usually BodyFont.

1. Click an empty part of the canvas, or press Esc, so nothing is selected. The Design Language panel appears on the right.
2. Open the Text tab.
3. Click the style with the Default badge.

4. Click Font Family and pick a font.
5. Click Update.

Every text element that uses this style now shows the new font. See How to create text styles.

In a site the AI built#

A site the TeleportHQ AI built takes its heading and body fonts from two CSS variables on the Vars tab: font-family-heading and font-family-body. The site's CSS classes use them.

1. If the new font isn't in your project yet, import it first. See How to add Google Fonts.
2. With nothing selected, open the Vars tab of the Design Language panel.
3. Click font-family-heading. Its panel opens with the Name and the Value.

4. In the value, replace the font name, for example with "Playfair Display", serif.
5. Click Update. The headings change on the canvas right away, and Preview and your published site use the new font.

When you change the color theme#

Changing the color theme can also change your heading and body fonts: a theme sets the fonts of its built-in heading and body classes. See How to choose a color theme (and light or dark mode).

Check that it worked#

The text on the canvas shows the new font straight away. The font also appears in Project settings → Fonts (the cog at the bottom of the left sidebar, then Appearance → Fonts), where you can see how many elements use it.

Troubleshooting#

The font I typed disappeared from Font Family Font Family only accepts fonts from its list. When you type another name, the field empties as you leave it. Add the font to your project first: How to add Google Fonts.

"Trying to enter an unrecognized font name - My Brand Font" A font name that isn't a Google font, a system font or one of your project's fonts was entered, for example in the Advanced tab. Upload the font first (How to upload your own fonts), or pick a font from the list.

"Font Source Sans Pro seems to have been deprecated from Google. We recommend to use a different font" Google no longer offers this font. Pick a similar one, such as Source Sans 3.

I can't find the font fields for my text The text is linked to a text style. Edit the style in Design Language → Text, or unlink it.

I want to use a font on only a few words Font Family always applies to the whole text element in TeleportHQ. Put those words in their own text element.

Good to know#

• The 12 ready-to-use Google fonts are Exo 2, Fira Sans, Merriweather, Noto Sans, Nunito, Open Sans, Oxygen, Poppins, PT Sans, Roboto, Source Sans 3 and Spectral. Picking one adds it to your project automatically.
• Google fonts your project no longer uses can be removed automatically when you change the theme. Uploaded fonts are kept.
• Fonts aren't limited by plan.