Skip to main content
All CollectionsEditing Your Site
[2.0] Adding Custom Fonts to your site
[2.0] Adding Custom Fonts to your site

This guide shows you how to upload fonts using the font file(.woff)

Daniel Barake avatar
Written by Daniel Barake
Updated over 2 weeks ago





Managing Custom Fonts

Our platform now includes a powerful custom font management system that allows you to upload, manage, and apply fonts to your website with ease. Below is a step-by-step guide to help you navigate and use the new system.

Accessing the Custom Fonts Management Page

To begin managing your custom fonts:

  1. Navigate to Branding Settings (Website->Branding) in the admin interface.

  2. Under the Fonts heading, click the Manage Custom Fonts link.
    ​
    ​

Adding a New Font Family

Step 1: Create a New Font Family

  1. Click New Custom Font.

  2. In the Name input provided enter the font family name (e.g., "Faith Pro").

  3. Click Create to proceed.

Adding Font Variations

A single font can have multiple variations determined by its weight and style, each requiring a separate font file.

Step 2: Upload Font Files

  1. To add a new font variation click the New Font button under the Fonts section.

  2. Expand the newly added item in the fonts list

  3. Click the Add Font button and then select or upload the font file via the media picker (e.g., WOFF2 format is recommended for optimal performance).

  4. Using the font weight dropdown Specify the font weight (e.g., 400 for regular, 100 for thin).

  5. Using the font style dropdown define the style (e.g., normal or italic).

Tip: You can reorder font variations within the interface for simplicity, but the order does not affect functionality.

Font Weights Overview

Font weights range from 100 (thin) to 900 (black). Below are common weights:

  • 100: Thin

  • 200: Extra Light

  • 300: Light

  • 400: Regular

  • 500: Medium

  • 700: Bold

  • 800: Extra Bold

  • 900: Black

Using Custom Fonts

Global Usage

Once a custom font is uploaded and saved:

  • It is automatically available on your website—no need to add it explicitly to the branding settings.

  • You can reference the font directly in your CSS or apply it globally via the font family dropdown fields in the through the brand settings.

Specific Usage

For finer control, you can:

  • Apply the font to specific blocks by adding the generated CSS class which you can find generated automatically at the bottom of the Edit Custom Font page.

  • Use the custom font class name in custom HTML or add the font family in custom CSS.

Preview and Apply Fonts

  • Return to the branding settings page.

  • Select a font for a specific element (e.g., paragraphs or headings).

  • Start typing the font name, and matching options will appear in the dropdown.

Best Practices

Optimal Font File Format

Use WOFF2 files whenever possible for better performance and compatibility.

Font Fallbacks

  • Specify a fallback font (e.g., serif, sans-serif, cursive) to ensure proper rendering if the custom font fails to load.

Additional Information

Automatically Generated CSS Classes

When you upload a font variation, the platform generates CSS class names automatically. These can be used in:

  • Blocks within the editor.

  • Custom CSS for advanced styling.

Troubleshooting

If you encounter any issues while managing fonts, ensure:

  1. The font files are correctly uploaded.

  2. The weight and style settings match the font file properties.

  3. Proper fallbacks are configured.

For further assistance, reach out to our support team with your questions or feedback.

With this new system, managing custom fonts on your website has never been more versatile or efficient. Explore the possibilities and make your site stand out!

Did this answer your question?