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. Naviguez jusqu'à Dashboard > MP App > Integrations > Google Fonts.
   
2. Cliquez sur Get a Key next to the Google Fonts API Key field.

3. The Google Developers Console opens in a new browser tab.
   
4. Faites défiler vers le bas et cliquez sur 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. Cliquez sur 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. Cliquez sur Enregistrer les modifications.

Remarque : 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. Naviguez jusqu'à Dashboard > MP App > Branding > Typography.
   
2. Localiser le Import Google Fonts section.
   
3. Cliquez sur 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. Cliquez sur Importation to add the font to the available fonts.

Remarque : 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. Naviguez jusqu'à 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. Cliquez sur Enregistrer les modifications to apply font selections.

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