How to Configure Typography

Introduction

Typography plays a key role in establishing your app’s brand identity and improving readability. With the Learndash App, you can customize fonts using Google Fonts or upload your own font files for a consistent and branded user experience.

This guide walks you through importing and configuring fonts and assigning them to various app sections.

Why Customize Typography in the Learndash App?

• Enhance Brand Identity – Align the app’s design with your brand’s visual language.
  
• Improve Readability – Adjust font styles and sizes for better user experience.
  
• Maintain Design Consistency – Apply uniform typography across app screens and components.
  

Access Typography Settings

1. In WordPress, go to Learndash App > Branding > Typography.
   
2. Locate the Import Fonts section.
   

Upload Custom Fonts

1. Click Upload Fonts.

2. In the pop-up, select a font file in TTF, OTF, or WOFF format.
   
3. Once uploaded, the font will appear under Imported Fonts.
   

Import Google Fonts

1. Click Import Google Fonts.

2. Browse or search for a font (e.g., Acme).
   
3. Preview the font style and review any compatibility warnings.
   
   • Fonts like Roboto support multiple styles and are recommended.
     
4. Click Import to add the font to your list.
   

Assign Fonts to App Sections

After importing a font, assign it to the following areas:

• Body Text – For general content.
  
• Navigation Bar Titles – For app header text.
  
• Headings – For H1, H2, H3, etc.
  
• Tab Bar Labels – For labels in the bottom navigation.
  
• Menus – For menu items and labels.
  

Note: Use the live preview panel to see how the fonts appear in the app UI.

Save Your Typography Settings

• Click Save Changes at the bottom of the page.
  
• Failure to save will discard all font selections and size changes.
  

Troubleshooting and FAQs

Q: Why is my custom font upload failing?
A: Make sure the file is in TTF, OTF, or WOFF format. Clear cache, reload the page, and try again.

Q: Why isn’t my imported Google Font showing?
A: Some fonts don’t support multiple styles or aren’t cached yet. Choose a widely supported font like Roboto.

Q: Why aren’t my font changes showing in the preview or app?
A: Click Save Changes, then hard-refresh your browser. If testing in the app, force-close and reopen it.