How to create text styles

In TeleportHQ, a text style is a saved set of font settings, such as "H1-Hero: Poppins, Bold, 48px". You create it in the Text tab of the Design Language panel: click +, give it a name, set the font options and click Add. When you edit a text style later, every text that uses it updates.

Before you start#

• Text styles are available on every TeleportHQ plan.
• You need a role that can edit the Design Language (Owner, Admin or Designer). Other roles see "Your current role does not have permission to update tokens."
• To use a Google font or your own font that isn't in the list yet, add it to the project first. See How to add Google Fonts.

Steps#

1. Press Esc, or click an empty part of the canvas, so no element is selected.
2. In the right panel, click the Text tab.
3. In the Text Styles section, click + after the last style. The Add Text Style panel opens with a sample sentence.

4. In Name, type a name, for example H1-Hero.
5. In Font Family, pick a font, for example Poppins.
6. In Font Weight, pick a weight, for example 700 - Bold.
7. In Font Size, pick or type a size, for example 48px.
8. Set Line Height, Letter Spacing, Text Transform and Text Decoration if you need them.
9. Click Add.

The style appears in the list with an "Aa" preview. The sample sentence in the panel shows how it looks while you edit.

Check that it worked#

The new style appears in the Text tab. To use it, select a text element and link the style. See How to apply a text style to text.

Edit a text style#

1. In the Text tab, click the style.
2. Change any setting.
3. Click Update.

Every text linked to the style changes.

Set the default text style#

The default text style is applied to all the text elements in your TeleportHQ project that don't have their own settings. It shows a Default badge. New projects start with a default style called Content. In sites the AI built, the default is usually BodyFont.

1. In the Text tab, right-click a style.
2. Choose Set as default body Text Style.

The style gets the Default badge.

Delete or duplicate a text style#

• To duplicate, right-click the style and choose Duplicate.
• To delete, right-click the style and choose Delete, or point at it and click ×. If texts use it, a Delete window tells you how many and asks you to confirm. Those texts keep the style's font settings as their own settings.
• You can't delete the default text style. Make another style the default first.

Troubleshooting#

The Add button is greyed out, or "Text Styles must have a name." Type a name. Add stays greyed out until the style has one.

"Text Style names can't start with a digit." / "Text Style names must begin with a letter, hyphen( - ) or underscore( _ ), followed by up to 29 letters." Start the name with a letter, for example Heading2 instead of 2Heading.

"Text Style names can't be more than 30 characters long." / "Text Style names can't contain any special characters." Use up to 30 characters: letters, numbers, hyphens, underscores and dots. Spaces are removed when you leave the field.

My settings disappeared Pressing Esc or clicking outside the panel closes it without saving. Click Add or Update.

The name I typed got a number added Text styles and CSS classes share the same names. If a class or style already uses the name, TeleportHQ adds a number.

Good to know#

• A new TeleportHQ text style starts as Arial, 14px, weight 500. Change these before you click Add.
• Font Weight only offers the weights the chosen font has.
• When you pick a new font in a text style, the font is added to the project.
• Text styles don't hold color. Set text color on the element or with a CSS class. See How to change font, size and text color.
• A text style has one set of values for every screen size. To make a heading smaller on one screen size, give the heading its own size there: with a style linked, the Visual tab hides the font fields, so open the Advanced tab and, under Screen ≤ 479px (or the size you want), add font-size with the value. That size wins over the style on that screen size, on the canvas and on your published site, and the style's size stays on the others. See How to change styles for mobile only.
• For text styles, View linked nodes and Highlight linked nodes in the right-click menu are always greyed out.