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. Vaya a Dashboard > MP App > Integrations > Google Fonts.
   
2. Haga clic en Get a Key next to the Google Fonts API Key field.

3. The Google Developers Console opens in a new browser tab.
   
4. Desplácese hacia abajo y haga clic en 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. Haga clic en 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. Haga clic en Guardar cambios.

Nota: 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. Vaya a Dashboard > MP App > Branding > Typography.
   
2. Localice el Import Google Fonts sección.
   
3. Haga clic en 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. Haga clic en Importar to add the font to the available fonts.

Nota: 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. Vaya a 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;
• Menús for menu item text.

4. Adjust font sizes in the size fields if needed.
   
5. Configure additional font styles as required.
   
6. Haga clic en Guardar cambios to apply font selections.

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