Konfiwear V2 is here — redesigned from the ground up.See what's new

Managing Fonts in Konfiwear

Fonts control what typefaces your customers can use for player names, jersey numbers, sponsor text, and any other text customization in the 3D customizer.

Prerequisites

⚠️ Important: You need admin or owner access to your Konfiwear account.

Navigating to Fonts

Go to Assets → Fonts from the sidebar, then click the Fonts tab in the horizontal navigation. The Fonts page shows a data table of all your fonts with search, sorting, and pagination.

Caption: The Fonts list page with source badges, preview text, and action menus.

Font Sources

Every font has a source that determines how the customizer loads it at runtime:

Source

How It Works

Best For

Google

Loaded from Google Fonts CDN. You specify the Google font family name (e.g., Roboto, Open Sans). The customizer fetches the font automatically.

Quick setup with thousands of free fonts. No hosting needed.

Custom

Loaded from a URL you provide (typically a WOFF2 file on your CDN or S3). You control the font file.

Brand-specific typefaces, licensed fonts, or fonts not available on Google Fonts.

System

Assumes the font is already installed on the customer's device. No file is loaded.

Common fonts like Arial, Helvetica, Times New Roman. Fast but not guaranteed on all devices.

💡 Tip: Google Fonts is the easiest starting point — zero hosting, automatic loading, and a massive library. Use Custom fonts for brand-specific typefaces that your team has licensed.

Adding a Font

1. Click Add Font

On the Fonts page, click the Add Font button. The font creation dialog opens.

2. Fill in the font details

Field

Description

Required

Name

Display name shown in the dashboard and customizer (e.g., "Roboto Bold", "Brand Typeface")

Yes

Family

The CSS font-family value used by the customizer (e.g., Roboto, Open Sans, BrandFont)

Yes

Source

Select Google, Custom, or System

Yes

Google Family

The exact Google Fonts family name. Only visible when source is Google. (e.g., Roboto)

When Google

URL

The URL to the font file (WOFF2 recommended). Only visible when source is Custom.

When Custom

Preview Text

Optional sample text shown in the font preview on the list page

No

Enabled

Whether the font is visible in the customizer

Yes

Sort Order

Display ordering in the customizer's font picker. Lower values appear first.

No

Caption: The font creation form with source-specific fields.

3. Save the font

Click Create. The font appears in the list with a source badge and a live preview using your preview text.

Font Variants

Each font can have multiple variants — combinations of weight and style that define different appearances:

Property

Values

Example

Weight

100–900 (standard CSS weights)

400 (Regular), 700 (Bold)

Style

normal, italic

italic for slanted text

URL

Optional file URL for the specific variant

A WOFF2 file for the bold italic version

Variants are managed inline within the fonts table. The customizer uses variants to offer weight and style options in the text editor.

💡 Tip: At minimum, add a Regular (400 normal) and Bold (700 normal) variant for each font. Add Italic variants if your customers need them for sponsor text or decorative elements.

Editing and Deleting Fonts

  • Edit — Click a font row or use the Edit action to open the detail view. All fields are editable.

  • Delete — Use the row's action menu. Deletion is permanent.

⚠️ Important: Deleting a font removes it from the customizer immediately. Any existing customer configurations using that font will need an alternative.

How Fonts Work in the Customizer

When a customer adds text in the customizer:

  1. The text editor shows all enabled fonts from your font library

  2. The customer selects a font — it loads from the appropriate source (Google CDN, custom URL, or system)

  3. Available variants (weight and style) appear as options within the text editor

  4. Text renders on the 2D canvas using the selected font and is reflected on the 3D model in real time

Tips & Best Practices

  • Offer 5–10 focused fonts rather than dozens — too many options slow loading and overwhelm customers

  • Test each font in the customizer before enabling — verify that it renders correctly at different sizes and on curved surfaces

  • Use WOFF2 format for custom fonts — it's the most efficient web font format with the smallest file size

  • Include at least two variants per font (Regular and Bold) for practical text customization

  • Name fonts by their visual identity — "Athletic Block", "Script Elegant" helps customers choose faster than "Font 1", "Font 2"

  • Disable system fonts if consistency matters — system font availability varies across devices. Google or Custom fonts guarantee consistent rendering.

Related Articles