{"id":10472,"date":"2025-09-22T20:09:22","date_gmt":"2025-09-23T00:09:22","guid":{"rendered":"https:\/\/learndash.com\/support\/?post_type=docs&p=10472"},"modified":"2025-09-23T10:30:55","modified_gmt":"2025-09-23T14:30:55","password":"","slug":"how-to-configure-typography","status":"publish","type":"docs","link":"https:\/\/learndash.com\/support\/kb\/learndash-app\/managing-content-for-learndash-app\/how-to-configure-typography\/","title":{"rendered":"How to Configure Typography"},"content":{"rendered":"\n

Introduction<\/strong><\/h2>\n\n\n\n

Typography plays a key role in establishing your app\u2019s brand identity and improving readability. With the Learndash App, you can customize fonts using Google Fonts<\/strong> or upload your own font files for a consistent and branded user experience.<\/p>\n\n\n\n

This guide walks you through importing and configuring fonts and assigning them to various app sections.<\/p>\n\n\n\n

Why Customize Typography in the Learndash App?<\/strong><\/h2>\n\n\n\n
    \n
  • Enhance Brand Identity<\/strong> \u2013 Align the app\u2019s design with your brand\u2019s visual language.
    <\/li>\n\n\n\n
  • Improve Readability<\/strong> \u2013 Adjust font styles and sizes for better user experience.
    <\/li>\n\n\n\n
  • Maintain Design Consistency<\/strong> \u2013 Apply uniform typography across app screens and components.
    <\/li>\n<\/ul>\n\n\n\n

    Access Typography Settings<\/strong><\/h2>\n\n\n\n
      \n
    1. In WordPress, go to Learndash App > Branding > Typography<\/strong>.
      <\/li>\n\n\n\n
    2. Locate the Import Fonts<\/strong> section.
      <\/li>\n<\/ol>\n\n\n\n

      Upload Custom Fonts<\/strong><\/h2>\n\n\n\n
        \n
      1. Click Upload Fonts<\/strong>.<\/li>\n<\/ol>\n\n\n\n
        \"\"\/<\/figure>\n\n\n\n
          \n
        1. In the pop-up, select a font file in TTF, OTF, or WOFF<\/strong> format.
          <\/li>\n\n\n\n
        2. Once uploaded, the font will appear under Imported Fonts<\/strong>.
          <\/li>\n<\/ol>\n\n\n\n

          Import Google Fonts<\/strong><\/h2>\n\n\n\n
            \n
          1. Click Import Google Fonts<\/strong>.<\/li>\n<\/ol>\n\n\n\n
            \"\"\/<\/figure>\n\n\n\n
              \n
            1. Browse or search for a font (e.g., Acme<\/strong>).
              <\/li>\n\n\n\n
            2. Preview the font style and review any compatibility warnings.
              \n
                \n
              • Fonts like Roboto<\/strong> support multiple styles and are recommended.
                <\/li>\n<\/ul>\n<\/li>\n\n\n\n
              • Click Import<\/strong> to add the font to your list.
                <\/li>\n<\/ol>\n\n\n\n

                Assign Fonts to App Sections<\/strong><\/h2>\n\n\n\n

                After importing a font, assign it to the following areas:<\/p>\n\n\n\n

                \"\"\/<\/figure>\n\n\n\n
                  \n
                • Body Text<\/strong> \u2013 For general content.
                  <\/li>\n\n\n\n
                • Navigation Bar Titles<\/strong> \u2013 For app header text.
                  <\/li>\n\n\n\n
                • Headings<\/strong> \u2013 For H1, H2, H3, etc.
                  <\/li>\n\n\n\n
                • Tab Bar Labels<\/strong> \u2013 For labels in the bottom navigation.
                  <\/li>\n\n\n\n
                • Menus<\/strong> \u2013 For menu items and labels.
                  <\/li>\n<\/ul>\n\n\n\n
                  \"\"\/<\/figure>\n\n\n\n

                  Note: Use the live preview panel<\/strong> to see how the fonts appear in the app UI.<\/p>\n\n\n\n

                  Save Your Typography Settings<\/strong><\/h2>\n\n\n\n
                    \n
                  • Click Save Changes<\/strong> at the bottom of the page.
                    <\/li>\n\n\n\n
                  • Failure to save will discard all font selections and size changes.
                    <\/li>\n<\/ul>\n\n\n\n

                    Troubleshooting and FAQs<\/strong><\/h2>\n\n\n\n

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

                    Q: Why isn\u2019t my imported Google Font showing?<\/strong>
                    <\/strong> A: Some fonts don\u2019t support multiple styles or aren\u2019t cached yet. Choose a widely supported font like Roboto<\/strong>.<\/p>\n\n\n\n

                    Q: Why aren\u2019t my font changes showing in the preview or app?<\/strong>
                    <\/strong> A: Click Save Changes<\/strong>, then hard-refresh your browser. If testing in the app, force-close and reopen it.<\/p>\n","protected":false},"excerpt":{"rendered":"

                    Introduction Typography plays a key role in establishing your app\u2019s 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….<\/p>\n","protected":false},"author":58,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_helpful_status":1,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"doc_category":[288],"doc_tag":[],"knowledge_base":[283],"class_list":["post-10472","docs","type-docs","status-publish","hentry","doc_category-managing-content-for-learndash-app","knowledge_base-learndash-app"],"year_month":"2026-04","word_count":364,"total_views":"407","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"display_name":"Stephanie Liy","author_link":"https:\/\/learndash.com\/support\/author\/stephaniei\/"},"doc_category_info":[{"term_name":"Managing Content for LearnDash App","term_url":"https:\/\/learndash.com\/support\/kb\/learndash-app\/managing-content-for-learndash-app\/"}],"doc_tag_info":[],"taxonomy_info":{"doc_category":[{"value":288,"label":"Managing Content for LearnDash App"}],"knowledge_base":[{"value":283,"label":"LearnDash App"}]},"featured_image_src_large":false,"comment_info":0,"knowledge_base_info":[{"term_name":"LearnDash App","term_url":"https:\/\/learndash.com\/support\/kb\/learndash-app\/","term_slug":"learndash-app"}],"knowledge_base_slug":["learndash-app"],"_links":{"self":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs\/10472","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/users\/58"}],"replies":[{"embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/comments?post=10472"}],"version-history":[{"count":1,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs\/10472\/revisions"}],"predecessor-version":[{"id":10473,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs\/10472\/revisions\/10473"}],"wp:attachment":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/media?parent=10472"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/doc_category?post=10472"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/doc_tag?post=10472"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/knowledge_base?post=10472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}