Uploading Custom Fonts

Uploading Custom Fonts

Custom fonts allow you to use unique typography that matches your brand identity. This guide explains how to upload and manage your own font files.

Preparing Your Font Files

Supported Formats

The system accepts these font file types:

  • TTF (.ttf) - TrueType Font

  • OTF (.otf) - OpenType Font

  • WOFF (.woff) - Web Open Font Format

  • WOFF2 (.woff2) - Web Open Font Format 2.0

File Requirements

  • Maximum file size: Typically 5-10MB per font

  • Character support: Ensure your font includes all needed characters

  • Licensing: Only upload fonts you have rights to use on the web

Optimization Tips

Before uploading:

  1. Remove unused characters to reduce file size

  2. Convert to WOFF2 for best compression

  3. Test the font in different browsers

  4. Check the license allows web embedding

Uploading a Font

Step 1: Access the Upload Dialog

  1. Navigate to Customization → Font Customization

  2. Click Upload Font in the Custom Fonts section

Step 2: Enter Font Details

Font Name

  • Choose a descriptive name

  • This appears in your font list

  • Examples: "Brand Sans", "Company Serif"

Step 3: Select Your Font File

Option A: Click to Browse

  1. Click the upload area

  2. Navigate to your font file

  3. Select the file

Option B: Drag and Drop

  1. Open your file manager

  2. Drag the font file

  3. Drop it on the upload area

Step 4: Upload

  1. Click Upload Font

  2. Wait for the upload to complete

  3. The font appears in your Custom Fonts section

Managing Custom Fonts

Viewing Your Fonts

Each custom font card displays:

  • Font name

  • "Custom Font" label

  • Preview with sample text

  • Control buttons

Applying Custom Fonts

Like Google Fonts, you can apply custom fonts to:

  • Body - All body text

  • Headings - All headings

  • Apply to Both - Entire site

Deleting Custom Fonts

To remove a custom font:

  1. Find the font in the Custom Fonts section

  2. Click the trash icon

  3. Confirm deletion

Warning: Deleting a font that's currently active will revert affected text to default fonts.

Last updated