> ## Documentation Index
> Fetch the complete documentation index at: https://docs.customei.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Fonts and font libraries

> Choose the typeface for a text layer, or offer your customers a set of fonts to pick from.

**Font Options** sets the typeface for a text layer. It also decides whether the font is your choice alone, or something the customer gets to pick on the product page.

<Frame caption="Font Options on a text layer, with a font library attached below the picker.">
  <img src="https://mintcdn.com/nexlify/jObu3-blJWj5gxav/images/editor/font-options.png?fit=max&auto=format&n=jObu3-blJWj5gxav&q=85&s=f9a999816772a89723488133fa42a229" alt="The Font Options section highlighted, showing a Font picker set to nada-qonita and, below it, a card previewing that font with the caption Option ID 1." width="656" height="1884" data-path="images/editor/font-options.png" />
</Frame>

## Setting one font

Click the **Font** picker and choose a typeface. The text on the canvas updates straight away, so you can try a few and keep the one that suits the design.

That is all most layers need. A slogan, a fixed date, a shop name: you pick the font, every order gets it.

<Tip>
  Hover a font in the list to see your actual text drawn in it before you commit.
</Tip>

## Letting customers choose the font

Sometimes the font is part of the personalization. A customer ordering an engraved necklace may want their name in a script, while the next customer wants a clean block letter.

To offer a choice, attach a **font library** to the layer. A library is a named set of fonts you have gathered in your Assets. Once attached, the fonts in it appear underneath the picker, each with an **Option ID** next to it.

<Note>
  The **Option ID** is the number that connects a font to a customer's choice. When you build the matching option in your option set, value `1` selects the font shown as Option ID 1, value `2` selects the second, and so on. See [Connect an option set to a template](/optionsets/connect-to-a-template).
</Note>

The picker still shows one font. That is the font used for the preview and for any order where the customer does not choose, so set it to the one you would want by default.

## Which fonts you can use

You can build a library from Google's font catalog, or upload your own font files if you have licensed a typeface for your products.

<Warning>
  Check the license before you upload a font. Many free fonts are free for personal use only, and selling a product with the font printed on it counts as commercial use.
</Warning>

## Choosing fonts that survive personalization

A font that looks beautiful in your design can fail on a real order:

* **Test the awkward characters.** Accented letters, apostrophes, and non-Latin alphabets are missing from a surprising number of decorative fonts. A missing character usually prints as a blank box.
* **Watch very light and very thin fonts.** What reads well on screen can disappear when it is embroidered or printed small.
* **Try a long name.** Condensed fonts hold up far better than wide ones when someone types fifteen letters.

## Where to next

<CardGroup cols={2}>
  <Card title="Text content and style" icon="font" href="/editor/text-content-and-style">
    Size ranges, spacing, and alignment.
  </Card>

  <Card title="Text color and stroke" icon="palette" href="/editor/text-color-and-stroke">
    Fill color, outlines, and color libraries.
  </Card>

  <Card title="Connect an option set" icon="link" href="/optionsets/connect-to-a-template">
    Wire a customer's choice to this layer.
  </Card>

  <Card title="What customers can change" icon="lock-open" href="/editor/customer-permissions">
    Decide which layers a shopper can edit.
  </Card>
</CardGroup>