Articles on: Artworks

This article is also available in:

Allow Customers to change Font Family, Color, Background

We have overhauled how you manage text customization in Teeinblue.

Previously, font and color settings were locked to individual text layers. We have moved these into independent Form Elements. You can now create dedicated Font, Color and apply them to multiple text layers simultaneously using the Populate Values feature.

Please continue reading to learn more about this new changes

Preparing the Assets

Uploading Fonts and creating Font Category

As you might have already known, to upload your Font, please go into Assets > Upload Fonts > and click on the Upload Font button

Be sure to only use TTF font format here.

Once you've uploaded your Fonts, you will have to create a category for it. You can do so via Assets > Font Categories > and click on the + New Category button. After that, you can add any Fonts you have uploaded into your Category there.

👉 Click here to jump to Artwork configuration step.

Creating Color Category for Font

As you have already known, you have two primary options regarding Font Color

Color Library: Create a dedicated Color Category to provide a curated selection of pre-set colors for customers to choose from. You can read more about the Color Category here.

Color Picker: Allow customers to select any custom color directly via a picker tool.

Linking these configurations to your specific text layers will be covered in a subsequent step.

👉 Click here to jump to Artwork configuration step.

Creating the Text Background Category

You can utilize any standard Clipart category as a background for your text. While we will cover how to link these to your layers in a later step, you should begin by setting up your category.
Create a new Clipart category for your font backgrounds as follows:

👉 Click here to jump to Artwork configuration step.

Setting up Artwork using Custom Font Family, Font Color, and Text Background

As previously mentioned, our updated workflow separates Font Selection and Color Selection into an independent Form Element. Instead of being confined to individual text layers, these settings are now created as modular options that can be applied across your design.

At this stage, you are only creating the selection options themselves. These are not yet bound to any specific text layers; they simply serve as the choices your customers will interact with.

Creating the Custom Font selection element

Inside your Artwork Editor, click on + Layer and select Font

You should find the setting panel for this layer pretty familiar. Please select it to the Font Category you've created at eariler step.

Creating the Font Color selection element

Inside your Artwork Editor, click on + Layer and select Color

Inside the setting panel, under Color options, choose one of the following:
- Solid Color category: customers pick one color from a Color Category.
- Color Sequence categories: select a parent Color Category. Each of its sub-categories becomes one color sequence that customers can pick. Each character of the text then takes the next color in the chosen sequence. You can read more in Color Sequence feature.
- Color picker: customers pick any color with a color picker.

Set a default color

Use Select default value to choose the color customers see first when they open the product page. Every text layer that takes its color from this Color layer also shows this default, until the customer picks another color.

What you choose as the default depends on the Color option:

Color option	Default value
`Solid Color category`	One color from the category
`Color Sequence categories`	One color sequence from the group
`Color picker`	One color, picked or entered as a hex code

Example with Color Sequence categories:

Example with Color picker:

To remove the default, click Clear default value.

Note that at this stage, you have only configured the Form Element options. You have not yet created the actual Text Layer itself; that will be handled in the upcoming steps.

Creating the Font Background Category

It is recommended that you use either Font Color or Font Background for your text, but not both simultaneously.

Since a Font Background functions as a Clipart category that your custom text will populate values from in a later step, please begin by creating a new Clipart category.

Inside your Artwork Editor, click on + Layer and select Clipart Category > 1 Clipart Category

Select the Clipart Category you've created at earlier step

Since this element acts as the source for your text background, it does not need to be visible on the product design itself. You can either drag it out of the Canvas area, or go into Extra > and set Display this layer on: None

Linking your Custom Text Layer to Form Elements

Now that you have created the Font Family, Font Color, and Text Background elements, it is time to connect them to your custom text. In this section, you will learn how to create a Custom Text layer and use the Populate values feature to link it to these three independent elements, allowing your customers to customize their text dynamically.

To create a new Custom Text layer, on your Artwork Editor, click on + Layer then select Single-line Text

Let's focus on the Populate Values section. Toggle on Populate Font from another option so that your Custom Text can populate the Custom Font selection value from the layer you have created.

With our new smart feature, if your layer only has one available value to populate from, it will be automatically selected for you. In this case, {{font}} is already filled.

Continue to do so with the Color Option or the Background option

That’s it. Your Custom Text layer is now linked to your Font and Font Color options.

💡You can link multiple text layers to the same Font or Font Color option. This ensures that customers only need to make a single selection, which will then automatically apply to all connected text layers simultaneously.

In the example above, the Customers only have to select the Font properties option once, and they will be applied to both Custom Text layers.

Populate Font or Color to multiple layers at once

Instead of opening each text layer one by one, you can link a Font or Color layer to several layers in one place.

Select your Font or Color layer, then go to its Personalization Settings.
In Populate to other layers, select every layer that should take its value from this layer. You can search the list, and each item shows its Option title and Layer name.

The selected layers show as tags under the field. To unlink a layer, remove its tag.

This setting stays in sync with Populate Values on each text layer. When you add a layer here, its Populate Font or Populate Color setting is turned on automatically, with this layer as the source. If you link them from the text layer instead, that text layer is added here automatically. Removing the link on either side removes it on both.

Updated on: 11/10/2026

Was this article helpful?

Thank you!