Configure the BuddyBoss App Typography

The BuddyBoss App Typography plays a crucial role in branding, helping to establish a unique visual identity and enhance readability in your BuddyBoss App. By customizing fonts, you can ensure a consistent look and feel across your app’s interface.

This guide walks you through the process of importing and configuring custom fonts, whether from Google Fonts or your own uploaded font files.

Why Customize Typography in the BuddyBoss App?

• Enhance Brand Identity – Use custom fonts that align with your brand’s style.
• Improve Readability – Adjust font sizes and styles for better user experience.
• Consistent Design – Apply uniform typography across different sections of the app.

Accessing the Typography Settings

1. Navigate to WordPress Dashboard > BuddyBoss App > Branding > Typography.
2. Locate the Import Fonts section.

Uploading Custom Fonts

1. Click Upload Fonts.
2. A pop-up will appear—select your font file (must be in TTF, OTF, or WOFF format).
3. Once uploaded, the font will be available under Imported Fonts.

Importing Google Fonts

If you prefer to use Google Fonts, follow these steps:

1. Click Import Google Fonts.
2. A pop-up will appear showing available fonts.
3. Select a font (e.g., Acme).
4. A preview demo will display the font’s style.
5. Check compatibility warnings—some fonts do not support multiple styles in the BuddyBoss App.
6. If needed, select an alternative font (e.g., Roboto, which supports multiple styles).
7. Click Import to apply the selected font.

Assigning Fonts to Different App Sections

Once imported, you can assign fonts to different app elements:

1. Body Text – Select a font for general text content.
2. Navigation Bar Titles – Choose a font for navigation headings.
3. Headings – Assign a font for H1, H2, H3, etc.
4. Tab Bar Labels – Select a font to be displayed in the tab bar.
5. Menus – Set a font for menu labels.

Use the preview panel on the right to see how the selected font appears in the app.

Adjusting Font Sizes

1. Under the Import Fonts section, locate your selected font.
2. Adjust the Font Size to match your app’s design needs.
3. Apply different sizes for body text, headings, and navigation elements.

Saving Your Changes

• Click Save Changes to apply the typography settings.
• Failure to save will result in losing all font customizations.