{"id":2007,"date":"2021-12-30T18:29:56","date_gmt":"2021-12-30T18:29:56","guid":{"rendered":"https:\/\/docs.generatepress.com\/?post_type=keep_articles&#038;p=2007"},"modified":"2022-10-28T04:17:14","modified_gmt":"2022-10-28T04:17:14","slug":"dynamic-typography-overview","status":"publish","type":"keep_articles","link":"https:\/\/docs.generatepress.com\/article\/dynamic-typography-overview\/","title":{"rendered":"Dynamic Typography Overview"},"content":{"rendered":"\n<p><em>Note: This feature requires GeneratePress 3.1.0. or above.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"GeneratePress - Dynamic Typography Demonstration\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/mNAlQDNyJPg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>You can find the Dynamic Typography options in <strong>Customize &gt; Typography<\/strong>.<\/p>\n\n\n\n<p>Please refer to <a href=\"https:\/\/docs.generatepress.com\/article\/switching-to-dynamic-typography\/\" target=\"_blank\" rel=\"noreferrer noopener\">this article<\/a> if you would like to switch your existing site to use the new system.<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-19d5860c gb-headline-text\">Font Manager<\/h2>\n\n\n\n<p>Once the Typography panel is open, you\u2019ll see the Font Manager. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"327\" height=\"348\" src=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2021\/12\/font-manager.jpg\" alt=\"\" class=\"wp-image-2008\" srcset=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2021\/12\/font-manager.jpg 327w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2021\/12\/font-manager-282x300.jpg 282w\" sizes=\"(max-width: 327px) 100vw, 327px\" \/><\/figure>\n\n\n\n<p>The Google fonts list will show by clicking the Search fonts field. You can select a font from the dropdown list or type in the font name to search. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"325\" height=\"449\" src=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2021\/12\/search-fonts.jpg\" alt=\"\" class=\"wp-image-2010\" srcset=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2021\/12\/search-fonts.jpg 325w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2021\/12\/search-fonts-217x300.jpg 217w\" sizes=\"(max-width: 325px) 100vw, 325px\" \/><\/figure>\n\n\n\n<p>Once the font is selected, you can select the variants available.<\/p>\n\n\n\n<p>If the selected font is a Google font, the Google font option will be <strong>toggled<\/strong> automatically.<\/p>\n\n\n\n<p>If this Google font is <a href=\"https:\/\/docs.generatepress.com\/article\/adding-local-fonts\/\" target=\"_blank\" rel=\"noreferrer noopener\">installed locally<\/a>, make sure this option is <strong>untoggled<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"323\" height=\"443\" src=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2021\/12\/font-selected.jpg\" alt=\"\" class=\"wp-image-2009\" srcset=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2021\/12\/font-selected.jpg 323w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2021\/12\/font-selected-219x300.jpg 219w\" sizes=\"(max-width: 323px) 100vw, 323px\" \/><\/figure>\n\n\n\n<p>To add a font <a href=\"https:\/\/docs.generatepress.com\/article\/adding-local-fonts\/\" target=\"_blank\" rel=\"noreferrer noopener\">installed locally<\/a>, enter the font name directedly in the Font family name field.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"326\" height=\"377\" src=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2021\/12\/add-local-font.jpg\" alt=\"\" class=\"wp-image-2011\" srcset=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2021\/12\/add-local-font.jpg 326w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2021\/12\/add-local-font-259x300.jpg 259w\" sizes=\"(max-width: 326px) 100vw, 326px\" \/><\/figure>\n\n\n\n<h2 class=\"gb-headline gb-headline-85b53ac4 gb-headline-text\">Google font-display<\/h2>\n\n\n\n<p>There&#8217;re 5 options in the dropdown list of Google font-display, to understand each option please check <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@font-face\/font-display\" target=\"_blank\" rel=\"noreferrer noopener\">Google font-display<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"325\" height=\"180\" src=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2021\/12\/Google-fonts-display.jpg\" alt=\"\" class=\"wp-image-2012\" srcset=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2021\/12\/Google-fonts-display.jpg 325w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2021\/12\/Google-fonts-display-300x166.jpg 300w\" sizes=\"(max-width: 325px) 100vw, 325px\" \/><\/figure>\n\n\n\n<h2 class=\"gb-headline gb-headline-88ae4faf gb-headline-text\">Typography Manager<\/h2>\n\n\n\n<p>The typography manager section lets you assign fonts and manage typography for the elements of your site.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"343\" height=\"354\" src=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2021\/12\/Typography-Manager.jpg\" alt=\"\" class=\"wp-image-2013\" srcset=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2021\/12\/Typography-Manager.jpg 343w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2021\/12\/Typography-Manager-291x300.jpg 291w\" sizes=\"(max-width: 343px) 100vw, 343px\" \/><\/figure>\n\n\n\n<p>Once the element is selected, you&#8217;ll see the typography options available. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Typography Options<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2022\/10\/font-options-3.2.0.jpg\"><img decoding=\"async\" loading=\"lazy\" width=\"322\" height=\"761\" src=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2022\/10\/font-options-3.2.0.jpg\" alt=\"\" class=\"wp-image-2116\" srcset=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2022\/10\/font-options-3.2.0.jpg 322w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2022\/10\/font-options-3.2.0-127x300.jpg 127w\" sizes=\"(max-width: 322px) 100vw, 322px\" \/><\/a><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Responsiveness<\/h4>\n\n\n\n<p>Set different typography values for different devices by clicking the desktop\/tablet\/mobile icon.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Font family<\/h4>\n\n\n\n<p>This option controls the font family from the font list created in the Font Manager.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Font weight<\/h4>\n\n\n\n<p>This option controls the thickness of the character outlines relative to their height.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Text transform<\/h4>\n\n\n\n<p><strong>None<\/strong> &#8211; No change to the font <\/p>\n\n\n\n<p><strong>Capitalize<\/strong> &#8211; The first letter of every word will be a capital<\/p>\n\n\n\n<p><strong>Uppercase<\/strong> &#8211; All letters will be capitalized<\/p>\n\n\n\n<p><strong>Lowercase<\/strong> &#8211; All letters will be lowercase<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Font Style<\/h4>\n\n\n\n<p>This option controls whether a font should be styled with a normal, italic, or oblique face from its font-family<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Text Decoration<\/h4>\n\n\n\n<p>This option controls the appearance of decorative lines on text.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Font size<\/h4>\n\n\n\n<p>This option controls the size of the text.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Line height<\/h4>\n\n\n\n<p>This option controls the height of a line box.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Letter spacing<\/h4>\n\n\n\n<p>This option controls the horizontal spacing behavior between text characters.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Bottom margin<\/h4>\n\n\n\n<p>Some elements like <strong>body <\/strong>and <strong>headings <\/strong>have a bottom margin option which controls the spacing under the text.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Units<\/h4>\n\n\n\n<p>Units available: px, em, rem, % (for font size only). Please see this <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-size#description\" target=\"_blank\" rel=\"noreferrer noopener\">article<\/a> for more info.<\/p>\n","protected":false},"template":"","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Dynamic Typography Overview - Documentation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/docs.generatepress.com\/article\/dynamic-typography-overview\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dynamic Typography Overview - Documentation\" \/>\n<meta property=\"og:description\" content=\"Note: This feature requires GeneratePress 3.1.0. or above. You can find the Dynamic Typography options in Customize &gt; Typography. Please refer to this article if you would like to switch your existing site to use the new system. Font Manager Once the Typography panel is open, you\u2019ll see the Font Manager. The Google fonts list [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/docs.generatepress.com\/article\/dynamic-typography-overview\/\" \/>\n<meta property=\"og:site_name\" content=\"Documentation\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/GeneratePress\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-28T04:17:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2021\/12\/font-manager.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@GeneratePress\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/docs.generatepress.com\/article\/dynamic-typography-overview\/\",\"url\":\"https:\/\/docs.generatepress.com\/article\/dynamic-typography-overview\/\",\"name\":\"Dynamic Typography Overview - Documentation\",\"isPartOf\":{\"@id\":\"https:\/\/docs.generatepress.com\/#website\"},\"datePublished\":\"2021-12-30T18:29:56+00:00\",\"dateModified\":\"2022-10-28T04:17:14+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/docs.generatepress.com\/article\/dynamic-typography-overview\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/docs.generatepress.com\/article\/dynamic-typography-overview\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/docs.generatepress.com\/article\/dynamic-typography-overview\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/docs.generatepress.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/docs.generatepress.com\/article\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Dynamic Typography Overview\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/docs.generatepress.com\/#website\",\"url\":\"https:\/\/docs.generatepress.com\/\",\"name\":\"Documentation\",\"description\":\"Get to Know GeneratePress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/docs.generatepress.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dynamic Typography Overview - Documentation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/docs.generatepress.com\/article\/dynamic-typography-overview\/","og_locale":"en_US","og_type":"article","og_title":"Dynamic Typography Overview - Documentation","og_description":"Note: This feature requires GeneratePress 3.1.0. or above. You can find the Dynamic Typography options in Customize &gt; Typography. Please refer to this article if you would like to switch your existing site to use the new system. Font Manager Once the Typography panel is open, you\u2019ll see the Font Manager. The Google fonts list [&hellip;]","og_url":"https:\/\/docs.generatepress.com\/article\/dynamic-typography-overview\/","og_site_name":"Documentation","article_publisher":"https:\/\/www.facebook.com\/GeneratePress","article_modified_time":"2022-10-28T04:17:14+00:00","og_image":[{"url":"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2021\/12\/font-manager.jpg"}],"twitter_card":"summary_large_image","twitter_site":"@GeneratePress","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/docs.generatepress.com\/article\/dynamic-typography-overview\/","url":"https:\/\/docs.generatepress.com\/article\/dynamic-typography-overview\/","name":"Dynamic Typography Overview - Documentation","isPartOf":{"@id":"https:\/\/docs.generatepress.com\/#website"},"datePublished":"2021-12-30T18:29:56+00:00","dateModified":"2022-10-28T04:17:14+00:00","breadcrumb":{"@id":"https:\/\/docs.generatepress.com\/article\/dynamic-typography-overview\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/docs.generatepress.com\/article\/dynamic-typography-overview\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/docs.generatepress.com\/article\/dynamic-typography-overview\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/docs.generatepress.com\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/docs.generatepress.com\/article\/"},{"@type":"ListItem","position":3,"name":"Dynamic Typography Overview"}]},{"@type":"WebSite","@id":"https:\/\/docs.generatepress.com\/#website","url":"https:\/\/docs.generatepress.com\/","name":"Documentation","description":"Get to Know GeneratePress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/docs.generatepress.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/docs.generatepress.com\/wp-json\/wp\/v2\/keep-api\/2007"}],"collection":[{"href":"https:\/\/docs.generatepress.com\/wp-json\/wp\/v2\/keep-api"}],"about":[{"href":"https:\/\/docs.generatepress.com\/wp-json\/wp\/v2\/types\/keep_articles"}],"wp:attachment":[{"href":"https:\/\/docs.generatepress.com\/wp-json\/wp\/v2\/media?parent=2007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}