Custom Fonts
Upload your own font files to use in Option Set design settings and the Personalizer. Custom fonts appear alongside Google Fonts throughout the dashboard wherever a font picker is shown.
Supported formats
| Format | Extension | Notes |
|---|---|---|
| WOFF2 | .woff2 | Recommended — best compression, supported by all modern browsers |
| WOFF | .woff | Good fallback for older browsers |
| TrueType | .ttf | Widely supported |
| OpenType | .otf | Supported |
Upload WOFF2 when possible. If you have a font in TTF or OTF format only, You can use a free online tool — search for ‘TTF to WOFF2 converter’ — to convert the file before uploading.
Uploading a font
- Go to Dashboard → Custom Fonts
- Click Upload font
- Select your font file (or drag and drop)
- Enter a Font name — this is the name that appears in all font pickers. Choose something descriptive (e.g., “Elegant Script” rather than “font_v3_final.woff2”).
- Click Upload
The font is stored securely and delivered quickly to your shoppers worldwide. Upload time is typically under 5 seconds for fonts under 500 KB.
Using custom fonts
Once uploaded, custom fonts are available in:
Option Set design settings
Go to the Option Set’s Design tab → Font family → the custom font appears at the top of the font picker with a “Custom” badge.
Personalizer text settings
Open an element’s Personalizer tab → Font family — custom fonts appear at the top of the list.
Storefront rendering
The app automatically loads the font on any product page that uses it, so the font renders correctly in both the widget UI and the Personalizer canvas.
Managing fonts
From the Custom Fonts page you can:
- Preview — see the font rendered in a sample text string
- Rename — change the display name (doesn’t affect existing Option Set configurations)
- Delete — removes the font from storage and from all font pickers. Existing Option Sets or Personalizer configurations that referenced the deleted font will fall back to the browser’s default sans-serif.
Licensing
You are responsible for having the appropriate license to use and embed any fonts you upload. If you purchased a font for use in design software (like Adobe Illustrator or Canva), check whether that license covers embedding it on a website — you’ll usually need a ‘Web’ or ‘Webfont’ license separately. Fonts from Google Fonts are always free to use. When in doubt, check the font’s license page or contact the font vendor.