How to Configure the App Typography

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.

Tutorial Video

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.

Troubleshooting and FAQs

Q: My custom font upload fails.
A: Ensure your file is in TTF, OTF, or WOFF format and under any size limits imposed by your server. Reload the Typography page after clearing any caching plugins, then retry the upload.

Q: Imported Google Font doesn’t appear in the font list.
A: Some Google Fonts lack multiple styles or aren’t yet cached by the plugin. Choose a well-supported family (e.g., Roboto) and confirm compatibility warnings before importing.

Q: New typography settings aren’t reflected in the preview panel.
A: Click Save Changes, then hard-refresh your browser (or clear the browser cache). If you’re testing in the app, force-close and reopen to pull the latest settings.