How to apply a text style to text

In TeleportHQ, you apply a text style from the Text Style section of the right panel: select the text, click the link icon, and pick a style from the Text Styles list. The text now uses that style's font, size and spacing, and changes whenever the style is edited. You can also save a text's current look as a new style from the same list.

Before you start#

• Create the text style first, or use your project's default style (for example Content, or BodyFont in a site the AI built). See How to create text styles.
• Text styles work on text, buttons, text inputs and list items.

Steps#

1. On the canvas, click the text, for example a section heading.
2. In the right panel, open the Visual tab.
3. Find the Text Style section. If its heading shows a name, for example Text Style - Headings, the text already has a style, and picking another one replaces it.
4. At the right of the Text Style heading, click the link icon.

5. In the Text Styles list, click a style, for example H1-Hero. You can type in the search box to find it.

The section heading changes to Text Style - H1-Hero, and the font fields are hidden, because the style now controls them. The list stays open: to close it, click the Text Style - H1-Hero heading. Don't click the icon at the right of the heading to close it: with a style linked, that icon unlinks the style.

Check that it worked#

The text on the canvas shows the style's font and size. The Text Style section heading shows the style's name.

Save a text's look as a new style#

Use this when you've already styled one heading in TeleportHQ and want to reuse that look.

1. Select the styled text.
2. In the Text Style section, click the link icon.
3. In the Text Styles list, click + (tooltip Create Text-Style from selected Node).
4. Type a name, for example SectionTitle.
5. Click Add.

The text's font settings are saved as a new style, and the text is linked to it.

Edit the linked style from the text#

1. In the Text Style section, click the section heading, for example Text Style - H1-Hero. The Text Styles list opens.
2. Point at the style: a settings icon appears at the right of its row (tooltip Edit H1-Hero). Click it.
3. Change the settings and click Update.

This changes the style everywhere it's used, not only on this text.

Unlink a text style#

1. At the right of the Text Style heading, click the unlock icon.

The text keeps the same look: the style's font settings are copied onto the text as its own settings. The font fields show again, and editing the style no longer changes this text.

Troubleshooting#

The font fields disappeared from Text Style A text style is linked. Its fields are hidden so the style stays in control. Unlink the style to edit the font on this text only.

My style doesn't appear when I search Type the name in lowercase. The search doesn't match capital letters.

There's no + in the Text Styles list The + only shows when no style is linked to the text, in the Visual tab, and when your role can edit the Design Language (Owner, Admin or Designer).

Only part of my text changed When you're editing the text and have some words selected, the style applies to that selection only. Click outside the text, select the whole element, and apply the style again.

Good to know#

• Applying a style in TeleportHQ removes the text's own settings for the things the style sets, so the style wins.
• The text's color isn't part of a text style. Set it in Text Color. See How to change font, size and text color.
• With no style linked, the link icon opens and closes the Text Styles list. With a style linked, the section heading opens and closes it, and the icon unlinks the style.