How to use your own custom fonts to your site

If you want to use a custom font in your website design through the Webmanager CMS, here’s how you can do it in just a few steps.

🛠 Step 1: Upload your font somewhere

Before anything else, you need to upload your font file (.woff2, .ttf, etc.) somewhere on the internet, like your own hosting or a reliable CDN.

Example:
https://yourdomain.com/fonts/Bauer-Bodoni/webfonts/308389_0_0.woff2

📌 You must have a direct URL to the font file.

🎨 Step 2: Go to the Custom Design panel

1. Open the Webmanager.
2. In the sidebar, click on Customize Design.
3. Look for the section called Globals.
4. Click Edit under Global CSS.

✏️ Step 3: Import your font

In the CSS editor that appears, you’ll need to define your font using @font-face. Here's the format:

@font-face {
  font-family: your-font-name;
  src: url(https://yourdomain.com/path-to-font-file.woff2);
}

👉 You can repeat this step for every font you want to use.

🧩 Step 4: Apply your font to the website text

Banana uses three main font sizes:

• Headings font (titles)
• Normal text font (body)
• Small text font (for footnotes, etc.)

To apply your custom font to these, you’ll need to overwrite some variables like this:

:root {
  --headings-font: your-font-name;
  --text-font: your-font-name;
  --small-text-font: your-font-name;
}

💡 Replace your-font-name with the same name you used in the font-family above.

✅ That’s it!

Once you save, your site will start using the new font. You can preview it instantly and adjust if needed.