Configuring Google Fonts in MemberPress App

Google Fonts integration enables custom typography matching brand style guidelines. Font import requires a valid Google Fonts API key. This document explains how to configure the API key, import fonts, and apply typography throughout the app.

Understanding Google Fonts Integration

Google Fonts provides extensive typeface options for app typography customization. API key configuration connects the app to the Google Fonts library. Imported fonts can be applied to various interface elements, including body text, headings, and navigation labels.

Configuring Google Fonts API Key

API key configuration enables font browsing and importing functionality.

1. Navigate to Dashboard > MP App > Integrations > Google Fonts.
   
2. Click Get a Key next to the Google Fonts API Key field.

3. The Google Developers Console opens in a new browser tab.
   
4. Scroll down and click Get a Key on the Acquiring and using an API key page.

5. Sign in with a Google account if prompted.
6. Create a new project or select an existing project from the list.

7. Enter a project name in the project name field.
   
8. Confirm API Enablement.

9. Click Show Key.

10. Copy the generated API key from the displayed field.
    
11. Return to Dashboard > MP App > Integrations > Google Fonts.
    
12. Paste the API key in the Google Fonts API Key field.
    
13. Click Save Changes.

Note: A valid API key is required before importing fonts from the Google Fonts library.

Importing Google Fonts

Font import adds typefaces to the available fonts list for app typography.

1. Navigate to Dashboard > MP App > Branding > Typography.
   
2. Locate the Import Google Fonts section.
   
3. Click Import Google Fonts to open the font browser.

4. Browse available fonts or use the search field to find specific typefaces.
   
5. Select the desired font from the search results or list.

6. Click Import to add the font to the available fonts.

Note: Imported fonts must be in TTF format to function correctly within the app.

Applying Imported Fonts

Imported fonts appear in the typography settings for assignment to interface elements.

1. Navigate to Dashboard > MP App > Branding > Typography.
   
2. Scroll to the interface element requiring font assignment.
   
3. Select the desired font from the font family dropdown for:

• Body Text for main content typography;
• Headings for H1 through H6 heading levels;
• Navigation Bar Titles for header text;
• Tab Bar Labels for bottom navigation text;
• Menus for menu item text.

4. Adjust font sizes in the size fields if needed.
   
5. Configure additional font styles as required.
   
6. Click Save Changes to apply font selections.

Font changes apply globally across all app screens using the selected interface elements.