---
title: "How to Configure Typography"
source: "https://docs.nexcess.com/software/learndash/configure-typography/"
description: "Introduction Typography plays a key role in establishing your app’s brand identity and improving readability. With the Learndash App, you can customize fonts us…"
vertical: "Software"
area: "LearnDash"
date: "2025-09-23"
last_modified: "2026-07-02"
---

# 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**.

![](https://docs.nexcess.com/wp-content/uploads/2026/07/AD_4nXdNyXj1Yo9Ysc6dIp5gbtqKb0A-Qmh9oAff-2qmfYyDXzYRBv1GQA31FuYLOGnl3ZbiQ9VMNjq7RBNhreigDBHn80j3tx25s5K_8npI4r5a1pb9YviX1xJYjnIlnUPAaCUSruBGUA.png)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**.

![](https://docs.nexcess.com/wp-content/uploads/2026/07/AD_4nXfEYlvPfmlonTsPzgJh35ZXECQaZ9lUtd6m480hx_If6ZRqRmZ54tvbG11fdnLrT0xh66AQ_x5aOFx4fqcRujF6MQQuP-mrHrdHQZXY3Yyk3wxDlBj_SMLo9E1Yecv9feOrsxgG.png)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:

![](https://docs.nexcess.com/wp-content/uploads/2026/07/AD_4nXf_dS8NMZygygEMJIF11CoRUQ8WkgouLqsMzLJIRflqyW9qdNdUtWLfB1M4PAJLYBlFc3HS_IL3rEi88DYSjwpE2oxoJf6NqxeivRulWMS5tq-rGkOwwGDUSwIvlQqfsn40T-3Rjw.png)- **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.

![](https://docs.nexcess.com/wp-content/uploads/2026/07/AD_4nXeR2GhVzsr3wlEvmO_lkf8XWNYjkcW4mhEKkgSndXmfsMqWKKgfAnutt3ID7iZfowq1DeJDUajQHTEiAo7hYo_aUTBUfpuhi-nvg8M4U2dbhSXrHh2QM52DOhnFNgYYqjz-3p0Wmg.png)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.