🎨 Font Selector
The Font Selector option type provides a search box, dropdown, or swatches for customers to select from either the entire Google font collection or specific Google fonts. Our current app version supports both Google and non-Google fonts for the font selector option type.
The Font Selector can be associated with a text field, allowing customers to enter text, select a font, and instantly view their entered text in the selected font. Distinct from typical dropdowns, font labels in the dropdown/swatches display in the actual fonts, not the default store font.
✨ What is the Font Selector?
The Font Selector is a feature that allows customers to choose fonts directly from your storefront. They can:
- Pick from all Google and non-Google Fonts or a curated list of specific fonts.
- Preview their text in real-time when paired with a text field (like a Text Box or Text Area).
Whether it’s for engraving, printing, or any other personalized touch, the Font Selector makes customization easy and visually appealing. 🖋️
Example:
Font Preview – in Dropdown & Text Box:
🛠️ How Does It Work?
Here’s how the Font Selector works in your store:
- Google Fonts or Custom Fonts? You can let customers choose from the entire Google Fonts library or upload your own custom fonts.
- Preview in Real-Time When connected to a text field, customers can type their text, select a font, and instantly see how it looks.
About the detailed steps on how to preview font selector in real-time, please check out our recording video here for references
- Dropdown or Swatches? Fonts can be displayed in a dropdown menu (with a search bar) or as swatches.
🛠️ Setting Up Your Font Selector
Here’s how you can configure the Font Selector in Tepo:
1️⃣ Basic Settings ****
- Label: Give your Font Selector a unique name (e.g., "Engraving Font") since this text will be displayed at: cart page, checkout and order details page.
- Display name: This text will be shown in the product page.
- Required Field: Make font selection mandatory if needed.
- Preview font in text option: Link a text field to allow real-time font previews.
2️⃣ Fonts for Selection
- All Google Fonts: Let customers choose from the entire Google Fonts library.
👉 To find your desired Google Font, simply type its name in the dropdown search bar, and it will appear instantly. This keeps the interface fast and user-friendly! 🚀
- Specific Fonts: Curate a list of your specific Google Fonts, instead of all Google font.
- Custom font: Upload your custom fonts
3️⃣ Display Options
- Dropdown or Swatches: Choose how fonts are displayed.
- Search Bar: Make it easy for customers to find their preferred fonts
4️⃣ Advanced Settings
- Add-on variant: Add the price to your font selector option type
- One Time Charge: Enable this option to apply a one-time customization fee for font selection, regardless of the quantity ordered.
- Option Width: Customize the width of the Font Selector dropdown or swatch area to match your store’s design.
---
Hopefully, this instruction has helped you. Things change all the time, so if you run into issues please don't hesitate to share them with us at support@tepo.app or use the in-app live chat. We're happy to lend a hand! 🤩
Updated on: 25/03/2025
Thank you!