Text and fonts

This page shows how to add text to a template, style it, and pick fonts. It also explains how to keep long text inside its box, which matters when a render sends text of a different length.

Add text

1. In the editor, click the Text tab.
2. Click Add a heading, Add a subheading or Add body text. Or, under Text styles, click a ready-made style such as “Special offer” or “Coming soon”.

The text lands in the middle of the page, sized to fit it, and is selected. Type to replace it (see below). You can change any part of a style afterwards.

Edit text

• Double-click the text on the canvas and type. To finish, click outside it or press Esc.
• Or select the text and type in Text content in the properties panel.

To put a value from a render inside a sentence, type a variable in double curly brackets, such as Hello {{name}}!. To let a render replace the whole text, make the layer a dynamic field. See Dynamic fields.

The text toolbar

Select one or more text layers, and the toolbar above the canvas shows these controls:

Control	What it does
Font name	Opens the Fonts tab to pick another font.
Font size	Drag the slider, click the minus or plus button (hold to repeat), or type a size from 5 to 300 px.
Weight	From 300 (light) to 800 (extra bold).
B	Bold. Switches between weight 700 and 400.
I	Italic. Greyed out when the font has no italic style.
U	Underline.
Color	The text color. If your brand library has colors, you can pick one of them or Custom color….
Alignment	Left, center or right.
Text transform	Aa as typed, AA all capitals, aa all small letters, Aa+ a capital at the start of each word.
Line height	The space between lines, from 1.0 to 2.5.
Letter spacing	The space between letters, from -2 to +8 px.

With several text layers selected, a change applies to all of them. A control shows “Mixed” or ”–” when the layers have different values.

Long text: grow, shrink or cut off

A text box has a fixed width. You choose what happens when the text needs more room than the box has:

Option	What happens
Grow the box	The box gets taller to fit all the text. Most new text starts this way.
Shrink the text	The box keeps its size. Text that doesn’t fit gets smaller, down to a minimum size.
Cut off	The box keeps its size. Text that doesn’t fit is cut off.

You can set this in two places:

• In the properties panel: tick Auto height (grow with text) to grow the box. To shrink, untick it and tick Shrink text to fit box, then set Min size if you like.
• In Advanced settings, under Typography: pick Overflow: grow the box with the text, Overflow: shrink the text to fit or Overflow: fixed box (cut off).

While the box grows with the text, you can’t type a height, and the canvas shows only the side handles. Typing a height in H turns growing off.

When Min size is empty, the text can shrink to 40% of its font size, but not below 8 px. Renders work the same way as the editor.

More text settings

Click Advanced settings in the toolbar for every text setting. Under Typography:

• the font, a weight from 100 to 900, a size up to 1,000 px, the line height and the letter spacing in any value you type;
• the Overflow options above;
• alignment, both across (left, center, right) and up and down in the box (top, middle, bottom). Up and down only works when the box doesn’t grow with the text;
• italic and underline;
• Letter case: None, UPPERCASE, lowercase or Capitalize;
• Outline: click Add outline to draw a line around the letters. Set its color, width and opacity. Click − to remove it.

Under Fill:

• Color: the text color, with an opacity in %. This is how you make text see-through.
• Background: click Add background to put a box of color behind the text. Set its color and opacity, or click − to remove it.

Text can also have a border and a shadow. A shadow on text falls on the letters. See Layout and style.

Fonts

To change a font, select a text layer, open the Fonts tab and click a font. You can also click the font name in the toolbar to open the tab.

Google Fonts

Under Google Fonts, type in Search Google Fonts or click a category: All, Sans Serif, Serif, Display, Handwriting or Monospace. Each row shows a preview of the font.

Your own fonts

Your fonts lists the font files in your workspace’s brand library. Every template in the workspace can use them. A font you add here goes into the brand library, and a font added in the brand library shows up here.

To upload a font file:

1. Click + Upload font.
2. Choose the file. It can be TTF, OTF, WOFF or WOFF2, up to 2 MB.
3. Type the Family name, the name the font shows under.
4. Pick the Weight and Style (Normal or Italic) of this file.
5. Click Upload.

For a family with several weights, upload each file with the same Family name and its own weight.

To add a font from a link:

1. Click + Add from URL.
2. Paste the Font URL: a direct, public link to a TTF, OTF, WOFF or WOFF2 file.
3. Type the Family name, and pick the Format (or leave Auto-detect), Weight and Style.
4. Click Add font.

JamFrame keeps the link, not a copy of the file, so the font stops working if the file moves. Fonts added from a link have a URL badge.

To delete a font, click the × on its row and confirm. Text that uses it falls back to a standard font.

What next

• Place and style text boxes: Layout and style.
• Let a render change the text: Dynamic fields.
• Let AI write the text at render time: AI layers.