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. Navigieren Sie zu Dashboard > MP App > Integrations > Google Fonts.
   
2. Klicken Sie auf Get a Key next to the Google Fonts API Key field.

3. The Google Developers Console opens in a new browser tab.
   
4. Scrollen Sie nach unten und klicken Sie auf 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. Klicken Sie auf 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. Klicken Sie auf Änderungen speichern.

Anmerkung: 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. Navigieren Sie zu Dashboard > MP App > Branding > Typography.
   
2. Suchen Sie die Import Google Fonts Abschnitt.
   
3. Klicken Sie auf 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. Klicken Sie auf Importieren to add the font to the available fonts.

Anmerkung: 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. Navigieren Sie zu 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. Klicken Sie auf Änderungen speichern to apply font selections.

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