Fonts

Default, Google, and your own uploaded fonts in the live preview — and how to let the customer choose.

The Font family setting controls which typeface the text layer is drawn in. Use a font that matches what you produce, so the preview is accurate.

Applies to: Text, Textarea, Number.

Watch it done — 2:13. The Personalizer version of font and color preview: the live preview is set up first, then Font preview and Color preview go on top, so the customer picks a typeface and a shade and watches the product image change.

If you only want the typeface and the shade shown inside the widget, with nothing drawn on the product image, the 1:28 video on Swatch style and previews covers that on its own.

The three choices

Choice	What it uses	Reveals
Default	The app's standard typeface	Nothing further
Google	A font from Google's library	Select Google font
Custom	A font file you uploaded to the app	Select Custom font

Choosing Google or Custom reveals a picker for the font itself.

Default

The app's own typeface. Use it while building, or when the font is not part of the product.

It is not suitable for engraving or embroidery, because the preview font will not match the font you produce.

Google

Choose one font from Google's library.

Good for	Watch out for
Finding a close match to your production font quickly	Close is not the same. Check the letterforms your customers will actually use
Scripts and display faces you do not own	Very ornate faces read badly at small sizes
Consistency with your storefront if it already uses a Google font	Fonts with limited character sets — check accents and non-Latin characters if your customers use them

Test the font with real names, including accented characters, before you publish.

Custom

Your own font file, uploaded to the app once and then selectable here.

Use this when the font is part of the product. If your engraving machine uses a specific typeface, upload that typeface so the preview matches the result.

1

Upload the font

Settings > Settings > General > Custom fonts. See Custom fonts.

2

Set Font family to Custom

On the text layer's Personalizer tab.

3

Select the font

From Select Custom font.

4

Check the characters you need

Upload the font and test it. Check accented letters, punctuation, and digits, because some display fonts do not include them.

Custom fonts may not be available on all plans. See Compare plans.

Letting the customer choose the font

The layer's font is fixed. To let customers select the font, add a Font picker option.

1

Add the text option with its Personalizer layer

Set its Font family to your most commonly selected font. This becomes the starting font.

2

Add a Font picker option

List only the fonts you can produce. You can add up to 30 Google fonts, plus your custom fonts.

3

Turn on Font preview on the picker

This draws each font name in its own typeface.

4

Point Select text box at the text option

This displays the customer's own text in the selected font, rather than only the font name.

5

Test on a real product page

Change the font and check that the preview updates.

Choosing fonts you can produce

Offer fonts based on what you can produce, not only on their appearance.

Ask	Because
Can our machine or supplier actually use this font?	Otherwise every order needs renegotiating
Does it include every character our customers type?	Accents, apostrophes, digits
Is it legible at the size we engrave?	Fine hairlines disappear when cut small
Are we licensed to use it commercially?	Font licensing applies to your production as well as your website

A short list of fonts you can produce is more useful than a long list you cannot.

Notes

• One font per layer. For two fonts on one product, use two options.

• Font style, which controls bold and italic, is a separate setting. It requires the font to include those versions.

• Google fonts load from Google when the page renders; custom fonts load from your store's files.

• Every font in a Font picker list is loaded for the preview, so a long list takes longer to display.