How to Configure Google Fonts in Your BuddyBoss App

Introduction

Google Fonts let you bring your brand’s typography into your BuddyBoss App with ease. By connecting a Google Fonts API key, you can import any font from the Google library—ensuring your app’s text matches your site’s look and feel.

Tutorial Video

Configuring the Google Fonts API Key

1. Go to BuddyBoss App > Integrations > Google Fonts.

2. Click Get a Key under the Google Fonts API Key field. You’ll be redirected to the Google Developers Console.
   
3. On the Acquiring and using an API key page, click Get a Key.
   
4. If prompted, log into your Google account.
   
5. Create or select a project, give it a name (e.g., your app’s name), agree to the Terms of Service, and click Next.
   
6. Once your API key is generated, click the copy icon to store it on your clipboard.
   
7. Return to BuddyBoss App > Integrations > Google Fonts, paste your API key into the Google Fonts API Key field, and click Save Changes.
   

Note: Without a valid API key, clicking Import Google Fonts will show a notice directing you back to this integration screen.

Importing Google Fonts

1. Go to BuddyBoss App > Branding > Typography.

2. Open the Import Google Fonts section and click Import Google Fonts.
   
3. Browse or search for the font you need—preview its styles right in the modal.
   
4. Select the desired style(s) and click Import.
   

Note: Imported fonts must be in .ttf format to work correctly in your app.

Applying Imported Fonts

Once a Google Font is imported, it appears under Imported Fonts in the Typography settings. Assign it to:

• Body Text
  
• Headings (H1, H2, H3…)
  
• Navigation Bar Titles
  
• Tab Bar Labels
  
• Menus
  

Adjust font sizes and styles as needed, then click Save Changes.

Troubleshooting & FAQs

Q: I get an error when importing a font.
A: Ensure your API key is valid under Integrations > Google Fonts, and that you selected at least one style before importing.

Q: My imported font isn’t showing in the dropdown.
A: Force-close and reopen the app to clear its cache. Then revisit Typography—your font should appear.

Q: Can I upload fonts directly?
A: Yes. Under Typography, use Upload Fonts to add any .ttf, .otf, or .woff file from your computer.

Q: Why .ttf only for Google Fonts?
A: The app’s font loader requires TrueType files for Google Font imports to ensure compatibility across devices.