How to change font, size and text color

In TeleportHQ, you change how text looks in the Text Style section of the right panel. Select the text, then set Font Family, Font Weight, Font Size and Text Color. The same section has line height, letter spacing, alignment, uppercase, underline, gradient text and text shadow.

Before you start#

• Text Style is available for text, headings, buttons, text inputs and list items.
• To use a Google font that isn't in the font list, import it first. See How to add Google Fonts.
• To change the font of your whole site at once, see How to change the fonts on your site.

Steps#

1. On the canvas, click the text once, for example a heading "Fresh cakes every morning". Don't double-click: that starts editing the words.
2. In the right panel, open the Visual tab and find Text Style. It comes after Classes, States and Text Content.
3. Click Font Family and pick a font, for example Poppins.
4. Click Font Weight and pick a weight, for example 700 - Bold.

5. Click Font Size and pick or type a size, for example 40px.

   

6. Under Text Color, click the swatch and pick a color, or type a hex value such as #3B2A20 in the field next to it. You can also pick one of your saved colors from the field's list.

Check that it worked#

The text on the canvas shows the new font, size and color. The fields you set show their values in normal text instead of grey.

More text options#

All of these are in the Text Style section of the TeleportHQ right panel:

• Line Height: space between lines, for example 1.5.
• Letter Spacing: space between letters, for example 1px.
• Text Transform: AA for uppercase, aa for lowercase, Aa to capitalize each word. Click the active button again to turn it off.
• Text Decoration: underline or line-through.
• Align: left, center, right or justify.
• White Space and Word Break: control how long text wraps.
• Text Shadow: click + to add a shadow, then set its color, X, Y and Blur. Click the trash icon to remove it.

Make gradient text#

TeleportHQ can fill text with a gradient instead of one color.

1. Under Text Color, click the gradient icon, next to the water-drop icon. A grey gradient fills the text.

   

2. Click the swatch. A gradient picker opens with 6 ready-made gradients.
3. Click a ready-made gradient, or change the colors in the picker. You can also type a gradient in the field next to the swatch, for example linear-gradient(to right, #feac5e 0%, #c779d0 100%).

To go back to a solid color, click the water-drop icon. The text gets your site's default text color.

Troubleshooting#

I don't see the font fields, only the name of a style A text style is linked, and the section title reads Text Style - and the style name. Its fields are hidden so the style stays in control. Edit the style, or unlink it to change this text only. See How to apply a text style to text.

The fields show grey names such as font-family-heading The text gets its look from a CSS class, and the grey names are saved values the class uses. Pick a value to override it on this element only, or change the class to change every element that uses it. See How the style panel works.

"Trying to enter an unrecognized font name" Font Family only accepts fonts in its list. Import the font first in project settings, then pick it. See How to add Google Fonts or How to upload your own fonts.

"Font … seems to have been deprecated from Google. We recommend to use a different font" Google no longer offers that font. Pick another one, for example Source Sans 3 instead of Source Sans Pro.

I selected a few words, but the font changed for the whole text Font Family always applies to the whole text element. To use a different font for some words, put them in a separate text element.

The weight I want isn't listed Font Weight only shows the weights the font includes. Choose a font that has that weight.

My font size changed on desktop too, or only on mobile Styles apply to the screen size selected at the top of the canvas and all smaller sizes. See How to change styles for mobile only.

Good to know#

• The font list has system fonts (such as Arial and Georgia), 12 popular Google fonts (such as Roboto, Open Sans and Poppins), and every font already added to your project. At the bottom, Upload custom fonts takes you to the project's font settings.
• Changing Text Color also colors icons inside the element.
• To color only a few words, double-click the text, highlight the words and use Text color in the small toolbar. See How to add and format text.
• To reset all text settings for the current screen size, click the colored Text Style title and choose Reset Values.