> For the complete documentation index, see [llms.txt](https://docs.theshoppad.com/infinite-options/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.theshoppad.com/infinite-options/welcome/create-custom-options/font-selector.md).

# Font Selector

Add a Font Selector field in Infinite Options so shoppers choose a typeface from a list you curate, ideal for signs, invitations, or engravings.

A Font selector field lets shoppers choose from a list of fonts you curate, useful for products like personalized signs, invitations, or engravings where the shopper picks a typeface.

## Step 1: Add a Font Selector Field

Open an existing Option Set or create a new one. Add a new option and select Font selector as the input type.

## Step 2: Choose Your Fonts

Search the full Google Fonts library, grouped by category, with each name shown in its own typeface.

Add the fonts you want shoppers to choose from, then drag them into the order you want, that's exactly the order shoppers will see.

A new Font selector field starts with no fonts selected, so add at least one before assigning it to products.

<figure><img src="https://docs.theshoppad.com/infinite-options/assets/Font%20Selector.jpeg" alt=""><figcaption></figcaption></figure>

The font's family name is what's submitted to the cart.

## Step 3: Style the Field

Under Styling, you can set a Class name for custom CSS. Font selector doesn't have separate color or size styling, it follows your theme.

:::caution
When a shopper opens a Font selector field, their browser requests a stylesheet from Google's font service (fonts.gstatic.com) to display the chosen fonts. If you have EU customers or need to disclose third-party requests in your privacy policy or cookie notice, account for this request there.
:::

## Step 4: Save Your Option Set

Click Save to save your changes.

### Using your Own Fonts

The Font selector only supports fonts from the Google Fonts library. You can’t upload your own font files to it.

If you want to offer fonts you created or license, use a Swatch option instead to show each font:

1. Create an image for each font.
2. Open your Option Set and add a new option.
3. Select Swatches as the input type.
4. Add one value for each font.
5. Click the swatch icon next to a value.
6. Upload the image for that font.
7. Click Save.
8. Repeat steps 5 to 7 for each font.
9. Click Save to save your Option Set.

For more on setting up image swatches, see [Create Color and Image Swatches](https://docs.theshoppad.com/infinite-options/inputs-and-field-settings/create-swatches/).

:::note
Infinite Options doesn’t show shoppers a live preview of their personalized text in the font they choose.
:::

## Tips

* All Google Fonts families are bundled into the admin, so there's no external API call or API key needed while building the field.
* On the storefront, each Font selector field lazily loads one stylesheet the first time a shopper opens it, containing only the fonts you've chosen.