Choose and Load Fonts

Pick from popular and Google fonts in the font picker, search by name, and use fonts your team has uploaded.

The font you pick sets the whole mood of a personalized product. This guide shows you how to open the font picker in the Design Studio, search for a font by name, and apply it to a text element. It also covers how fonts your team has uploaded appear in the same list. It is written for anyone building a personalizable product, no design background needed.

Open the font picker

The font picker lives in the properties panel for a text element. It shows a built-in list of popular fonts the moment you open it, then adds a curated set of Google fonts on your first open. Each option previews in its own typeface, so you can see how it looks before you apply it.

Select a text element

Click a text element on the canvas. Its properties open in the panel on the right.

If you do not have a text element yet, see add and style text first.

Click the Font family field

Under the Font family label, click the font field to open the picker. The dropdown opens with a search box at the top and a scrollable list of fonts below.

The field previews in the current font, so you can read the active choice at a glance.

The font picker, opened from the Font family field.

Search and pick a font

The list can be long, so the fastest way to find a font is to type its name. The list filters as you type. When you click a font, the editor loads it on the fly and applies it to your selected text.

Type part of a font name

Start typing in the search box. The list narrows to fonts whose names contain what you typed. The match is not case-sensitive, so “play” finds Playfair Display.

If nothing matches, the picker tells you no fonts were found. Clear the search box to see the full list again.

The list filters in real time as you type a font name.

Click a font to apply it

Click any font in the list. The editor loads that font on demand through a Google Fonts stylesheet, then applies it to your selected text. The picker closes and the Font family field updates to show your choice.

Loading happens once per font. After the first time, the font is ready to reuse without another fetch.

Uploaded custom fonts show up in this same list, next to the Google fonts. Composerie loads them through an @font-face rule so they preview and apply just like the rest. That means a brand font your team added is one search away when you are styling text. To manage uploaded fonts and other brand files, see your brand assets in account settings.

Why does the list look short the first time I open the picker?

The popular built-in fonts appear right away. The curated Google fonts load on your first open, so the full list fills in a moment later.

Do shoppers see every font I see?

No. Shoppers only choose from the fonts you allow on a customer-editable text field. Set that allowed list when you make a field editable.

Can I use a font my team uploaded?

Yes. Uploaded fonts appear in the same picker list alongside the Google fonts, and you apply them the same way.

Next

Once your font is set, add a text effect like an outline or shadow, or decide which fonts shoppers can choose when you make the field customer-editable.

Related articles