Typografie in der MemberPress-App konfigurieren

Typography establishes brand identity and improves content readability within mobile applications. MemberPress App supports custom font configuration using Google Fonts or uploaded font files. This document explains how to import fonts, assign typography to app sections, and optimize text display for member engagement.

Understanding Typography Configuration

Typography configuration controls font families, styles, and sizes throughout the app. Custom fonts align the app's appearance with brand guidelines and enhance visual consistency. Google Fonts integration provides extensive typeface options without file management. Custom font uploads support proprietary brand typefaces. Proper typography configuration improves readability while reinforcing brand identity across all app screens.

Understanding Typography Benefits

Custom typography provides multiple user experience and branding advantages.

Brand identity reinforcement occurs through consistent typeface usage. Members associate specific fonts with brand recognition and trust.

Readability optimization improves through appropriate font selection. Well-designed typefaces enhance comprehension and reduce eye strain.

Design consistency emerges from unified typography across screens. Cohesive font usage creates professional, polished appearances.

Accessibility enhancement results from proper font sizing and weight. Legible typography serves members with varying visual capabilities.

Accessing Typography Settings

All typography configuration occurs within the branding typography interface.

1. Navigieren Sie zu Dashboard > MP App > Branding > Typography.
   
2. Suchen Sie die Import Fonts Abschnitt.

Typography settings control both font imports and section-specific font assignments.

Uploading Custom Fonts

Custom fonts add proprietary typefaces to the app font library.

1. Navigieren Sie zu Dashboard > MP App > Branding > Typography.
   
2. Klicken Sie auf Upload Fonts in the Import Fonts section.

3. Klicken Sie auf Datei auswählen in the upload dialog.

4. Select a font file from the device.
   
5. Verify the file format is TTF, OTF, or WOFF.
   
6. Klicken Sie auf Hochladen to complete the import.
   
7. Verify the font appears under Imported Fonts.

Uploaded fonts become available immediately for assignment to app sections.

Supported Font File Formats

Different font formats offer varying compatibility and features.

TrueType Font (TTF) provides broad compatibility across platforms. TTF files work reliably in most contexts.

OpenType Font (OTF) offers advanced typographic features. OTF supports extended character sets and ligatures.

Web Open Font Format (WOFF) optimizes font delivery for web contexts. WOFF files compress efficiently for smaller sizes.

Upload fonts in the format matching the source files. Avoid converting between formats, which may degrade quality.

Importing Google Fonts

Google Fonts integration adds web fonts to the app font library.

1. Navigieren Sie zu Dashboard > MP App > Branding > Typography.
   
2. Klicken Sie auf Import Google Fonts in the Import Fonts section.

3. Browse available fonts or use the search field.

4. Enter a font name in the search field to filter results.
   
5. Click a font name to preview styles and view details.
6. Review available font weights and styles in the preview.
   
7. Note any compatibility warnings for the selected font.

8. Klicken Sie auf Importieren to add the font to the library.

9. Verify the font appears under Imported Fonts.

Imported Google Fonts include all available weights and styles automatically.

Assigning Fonts to App Sections

Font assignments control typography for specific interface elements.

Assigning Body Text Font

Body text represents primary content throughout the app.

1. Navigieren Sie zu Dashboard > MP App > Branding > Typography.
   
2. Blättern Sie zum Body Text Abschnitt.
   
3. Klicken Sie auf die Font Family Dropdown.
   
4. Select a font.
   
5. Review the live preview panel for appearance verification.

Body text font affects blog posts, page content, and general text throughout the app.

Assigning Navigation Bar Titles Font

Navigation bar titles appear in app headers and page titles.

1. Suchen Sie die Navigation Bar Titles Abschnitt.
   
2. Klicken Sie auf die Font Family Dropdown.
   
3. Select a font.
   
4. Review the navigation bar preview in the live preview panel.

Navigation bar typography should remain clear and readable at typical viewing distances.

Assigning Headings Font

Headings organize content through visual display.

1. Suchen Sie die Headings Abschnitt.
   
2. Klicken Sie auf die Font Family Dropdown.
   
3. Select a font.
   
4. Review heading hierarchy in the live preview panel.

Heading fonts should provide clear visual differentiation from body text.

Assigning Tab Bar Labels Font

Tab Bar labels identify bottom navigation options.

1. Suchen Sie die Tab Bar Labels Abschnitt.
   
2. Klicken Sie auf die Font Family Dropdown.
   
3. Select a font.
   
4. Review the Tab Bar preview in the live preview panel.

Tab Bar fonts should remain legible at small sizes on mobile screens.

Assigning Menus Font

Menu fonts control navigation item text in the Tab Bar and More Menu.

1. Suchen Sie die Menüs Abschnitt.
   
2. Klicken Sie auf die Font Family Dropdown.
   
3. Select a font.
   
4. Review the menu preview in the live preview panel.

Menu fonts should provide clear readability for quick navigation scanning.