Fonts Management

The KIT Fonts panel allows you to upload and manage custom typefaces that will be available to customers in the Designer Studio text tool. Fonts are stored in the plugin's local fonts directory and registered in a fonts-manifest.json file that maps font slugs to file paths.

How Fonts Work

Fonts in BallinKit have two sources:

1. Admin-Uploaded Fonts (fonts-manifest.json): Fonts uploaded through the admin panel are stored at wp-content/plugins/kit-customizer/assets/fonts/ and registered in assets/fonts/fonts-manifest.json. These are available globally to all customers in the font selector dropdown.
2. Customer-Uploaded Fonts (in-session): Customers can upload their own .ttf or .otf font files directly in the designer studio. These are uploaded via REST API, applied immediately to the canvas, and sent with the order via the _kit_fonts order meta as a JSON object of {\"FontName\": {\"name\": \"FontName\", \"url\": \"https://...\"}}.

Admin Font Upload Process

Navigate to KIT Designer > Fonts:

1. Click Add New Font or drag and drop font files into the upload area.
2. The font file is uploaded and stored in assets/fonts/.
3. The font name (slug derived from filename) is registered in fonts-manifest.json mapping to the filename.
4. The font immediately appears in the Designer Studio font selector for all products.
5. Fonts are loaded via CSS @font-face declarations at canvas load time — each font's URL is passed via the Fabric.js data-url attribute on the select option element.

Supported Font Formats

• TTF: TrueType Font — primary supported format for admin uploads
• OTF: OpenType Font — also supported
• WOFF/WOFF2: Can be added manually to the fonts directory

Font Display in the Designer Studio

In the Text tab, the font selector displays each font with its name formatted (underscores and hyphens replaced with spaces, title-cased). System fallbacks (Outfit, Arial, Impact) are always appended at the end. When a customer selects a custom font, the font file URL is fetched and registered as a dynamic @font-face rule so Fabric.js renders the text correctly on the canvas.

Font Data in Orders

When an order is placed, the _kit_fonts order item meta stores all fonts used in the design as a JSON object. In the WooCommerce order admin view, the admin panel displays each font with its name and, when a custom font URL is present, a clickable download link so production staff can access the exact font file used in the design.

Font Management Best Practices

• Use descriptive font file names — they become the font slug and display label
• Keep font files under 200KB for fast loading
• Test fonts across different browsers before publishing
• Ensure fonts have proper licensing for commercial use
• The fonts-manifest.json file can be manually edited if you need to rename a font entry

Assets Management (Garments & Patterns)

Navigate to KIT Designer > Assets to manage the garment and pattern image library. This panel uses the WordPress Media Library with a custom Garments & Patterns tab that filters to show only assets tagged as kit-assets (stored in wp-content/uploads/kit-uploads/ or tagged with the _kit_asset_type meta).

When you upload a base or color image on the Products page, it is automatically tagged as a kit-asset and stored in the /kit-uploads/ subdirectory. You can also manually tag any WordPress Media Library attachment as a kit-asset using the AJAX handler (wp_ajax_kit_tag_asset).