View Categories

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.
  1. In the pop-up, select a font file in TTF, OTF, or WOFF format.
  2. Once uploaded, the font will appear under Imported Fonts.

Import Google Fonts #

  1. Click Import Google Fonts.
  1. Browse or search for a font (e.g., Acme).
  2. Preview the font style and review any compatibility warnings.
    • Fonts like Roboto support multiple styles and are recommended.
  3. 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.

Updated on September 23, 2025