Upload custom fonts

TL;DR / Overview

Want to add a custom font to your site? Nilead makes it easy. You can use Google Fonts, Adobe Fonts (Typekit), or upload your own. Once uploaded, you can assign fonts to tags, classes, or elements using the Style Panel. Font fallback options and file format support help ensure smooth display across all browsers.

Prerequisites

• Editor or Admin access to your Nilead project

• Font files (WOFF, TTF, OTF, etc.) with proper licensing

• A clear idea of where fonts will be applied (e.g., headings, body text, buttons)

Main Body

Adding Fonts to Your Project

1. Open the Quick Menu

2. Search for “Font”

3. Choose from:

   • Google Fonts – built-in integration

   • Adobe Fonts (Typekit) – connect via project ID

   • Custom Fonts – upload your own files

Uploading Custom Fonts

⚠️ Important: Always check your font’s license before uploading. Read the Introduction to Font Licensing for details.

Supported Formats

Tip: Use online font converters to convert your fonts to WOFF or WOFF2 if needed. Max file size per font = 10MB.

Good to know: You don't need to upload every file format. However, you can upload a number of different formats to cover maximum browser support. WOFF is a good format with maximum browser compatibility and a good file size. If you do not have a WOFF or WOFF2 version of your font files, you can use font converters found online.

Editing Font Settings

After uploading, you can:

• Rename the font family

• Assign font weights and styles (e.g., Bold, Italic)

• Upload multiple weights under the same family for styling flexibility

You can always edit or delete uploaded fonts later from the Fonts panel.

Setting Fallback Fonts

Fallback fonts improve compatibility across devices.

• Fallbacks are auto-generated for each custom font

• You can edit the fallback font (e.g., Arial, Helvetica)

• Adjust font display settings (e.g., swap, block) for how fonts load

Best Practice: Use swap to avoid "flash of invisible text" (FOIT).

Testing Your Fonts in the Visual Editor

1. Add the custom font to your Style settings

2. Go to a layout/page using that Style

3. Click any text or container element

4. In the Style Panel, choose your uploaded font under Typography

5. You can assign fonts to:

   • Individual text elements

   • Entire sections or containers

   • Specific tags (e.g., h1, p) or CSS classes

FAQs

1. What’s the max size for custom font uploads?
10MB per font file.

2. Can I use fonts from Typekit (Adobe Fonts)?
Yes — you can integrate Adobe Fonts using your project ID.

3. Should I upload all font formats?
Not necessary. WOFF or WOFF2 covers most modern browsers.

4. How do I apply a font to the whole site?
Use your Style settings to assign fonts to base tags like body, h1, p, etc.

5. What happens if the custom font doesn’t load?
The fallback font will be used instead, ensuring visual consistency.