🎨 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.
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. 🖋️
Demo product
Font Preview – in Dropdown & Text Box:
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.
Here’s how you can configure the Font Selector in Tepo:
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.
All Google Fonts: Let customers choose from the entire Google Fonts library.
To ensure smooth product page performance and avoid any delays in loading, the Font Selector will not display all Google Fonts in the dropdown by default. Instead, only a few fonts will be shown initially.
👉 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
Dropdown or Swatches: Choose how fonts are displayed.
Search Bar: Make it easy for customers to find their preferred fonts
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! 🤩
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:
Demo product
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 ensure smooth product page performance and avoid any delays in loading, the Font Selector will not display all Google Fonts in the dropdown by default. Instead, only a few fonts will be shown initially.
👉 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!