How to Add Custom Fonts in BuddyBoss Theme

Introduction

The BuddyBoss Theme allows you to upload and use your own custom fonts. Once added, these fonts become available in the Typography options within Theme Settings and can be used throughout your site. Custom fonts also work with page builders such as Elementor and Beaver Builder, giving you full design flexibility. This guide will show you how to add custom fonts, configure font variations, and apply them across your site.

Tutorial Video

Preparing Your Font Files

Before uploading fonts:

• Make sure you have web font file formats. Supported formats are:
  • WOFF
  • WOFF2 (modern format)
  • TTF
• Avoid OTF or system fonts, as they may not work.
• Resources such as Font Squirrel provide free web fonts. When downloading, use the Webfont filter to ensure compatibility.

Adding Custom Fonts

1. Go to BuddyBoss > Theme Options > Custom Fonts.
2. Click New Font.
3. Enter a Font Family Name (this name will appear in the typography dropdown).
4. Add a variation for each style of the font:
   • Upload the font file (TTF, WOFF, or WOFF2).
   • Assign the Weight (e.g., 400 for normal, 700 for bold).
   • Assign the Style (Normal or Italic).
5. Repeat the process for all variations (e.g., Regular, Bold, Italic, Bold Italic).
6. Click Publish.

Your new font family will now appear in the Custom Fonts list.

Applying Custom Fonts in BuddyBoss Theme

1. Go to BuddyBoss > Theme Options > Typography.
2. Select your new font from the dropdown (e.g., apply it to Headings (H1–H6) or Body Text).
3. Choose the weight and style as configured in your variations.
4. Save your changes.

Note: If the font weight or style doesn’t apply correctly, it may be overridden by theme CSS or third-party plugins. You can enforce it using child theme CSS if needed.

Using Custom Fonts in Elementor

1. Activate Elementor and open a page or header template in the Elementor Theme Builder.
2. Select the element you want to edit.
3. Go to Style > Typography.
4. Choose your custom font from the list.
5. Elementor will show all font weight options, but only the ones you uploaded will work properly. Match them to the variations you set up.

Using Custom Fonts in Beaver Builder

1. Activate Beaver Builder and Beaver Themer.
2. Open a page or header template in Beaver Builder.
3. Select the element to edit.
4. Go to the Fonts section.
5. Custom fonts will appear under System Fonts. Select your font from the list.
6. Save and publish changes.

Resetting to Default Fonts

The BuddyBoss Theme defaults are:

• SF UI Text
• SF UI Display

To return to defaults, simply select these from the Typography settings.

Troubleshooting and FAQs

Q: My custom font isn’t showing up in the dropdown. What should I do?
A: Refresh the page after publishing the font. Ensure the file format is WOFF, WOFF2, or TTF.

Q: Why do my fonts look different than expected?
A: Some styles (e.g., Bold Italic) may be overridden by theme CSS or plugins. Use child theme CSS to force the style if needed.

Q: Can I upload only one font file?
A: Yes. If you don’t have all variations, upload what you have. The theme will still apply the font.

Q: Where do my custom fonts appear in Beaver Builder?
A: They appear under System Fonts, not in a separate BuddyBoss section.

Q: Can I use my custom fonts with both Elementor and Beaver Builder?
A: Yes. Custom fonts work in both page builders once added to the BuddyBoss Theme.