# Font Selector

The **Font** option type allows customers to personalize the appearance of text on their product options by choosing from a variety of fonts. With a quick preview feature, customers can see how each font will look before making a selection.

👉You can check out our [Demo product](https://avis-demo.avisplus.io/products/font-text) to see how it works

***

## **Basic Option Settings:** <a href="#basic-option-settings" id="basic-option-settings"></a>

<figure><img src="/files/q29EkuvYQkBmfTBNR0Wp" alt=""><figcaption></figcaption></figure>

**1. Option Name**

This is the internal name for the Font option within the app’s settings. It helps you manage and identify the option but does not appear on the storefront product page.

**2. Label on Product**

This is the text that appears above the Font selector on the product page of your storefront. It provides context or instructions for the customer, such as "Select your font"

**3. Label on Cart**

This label appears in the shopping cart, order details, invoices, packing slips, order confirmation emails, and other order-related documents, showing the selected options clearly.

**4. Required Field**

Make it mandatory for customers to select at least one font from the Font list before adding the product to their cart. This ensures that all necessary choices are made.

**5. Add-on product**

When enabled, this setting adds an additional charge to the product if the font is selected. It’s useful for optional features or upgrades that come at an extra cost.

#### **6.** One time charge

This setting allows you to modify how additional charges are applied to a specific option value. Normally, the extra charge for an option is multiplied by the quantity of the product purchased (e.g., an additional charge of $10 would become $50 if the quantity is 5). However, by enabling the "One time charge" feature, the extra charge will only be added once, regardless of the product quantity. This is useful when you want to apply a flat fee for certain options without scaling the charge with the number of items purchased.

**7. Hide "Label on Product"**

Option to hide the label next to the combo box on the product page, providing a cleaner and more streamlined appearance.

**8. Select from google fonts**

A wide range of Google Fonts is available for selection, offering customers numerous style choices to personalize their text. To explore more font options in the preview, customers can search by the font name, allowing them to quickly find and apply the font.

**9. Select from your fonts**

Click on the 'Upload your fonts [here](https://store-test-lucy.myshopify.com/admin/apps/avisplus_options/avis-option/avis-settings)' to upload your own fonts.&#x20;

**10. Number of fonts display**

Choose how many fonts you want to show when the customer click on select font

**11. Select options for preview**

This feature allows customers to test and visualize how the customizations will appear on the live store. Currently, it only supports text previews for "Single line text" and "Multi-line text" options.&#x20;

**12. Conditional Logic**

This setting allows you to display the font option only when certain conditions are met. It’s beneficial for creating a dynamic shopping experience, where certain options appear based on previous selections.

{% hint style="info" %}
[How to set up Conditional logic for your options](https://options-docs-v2.avisplus.io/app-features/conditional-logic-option-b-shows-if-option-a-is-selected)
{% endhint %}

***

## **Advanced Option Settings:** <a href="#advanced-option-settings" id="advanced-option-settings"></a>

<figure><img src="/files/xFbmu0weZGzt9N900ELX" alt=""><figcaption></figcaption></figure>

**1. Tooltip**

Provide additional information about each option by adding tooltips. When customers hover over an option, the tooltip will display, offering further details.

**2. Help Text**

Display help text below the Font selector to offer further explanations or instructions, helping customers make informed selections.

**3. Class Name**

For advanced customization, add custom CSS class names to the Font selector. This allows you to style it according to your brand’s design standards, ensuring a cohesive look across your product page.

**4. Price display type**

Decide whether to **show or hide** the additional price on the slider interface.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://options-docs-v2.avisplus.io/option-types/all-option-types/font-selector.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
