{"id":209,"date":"2020-05-04T13:44:04","date_gmt":"2020-05-04T13:44:04","guid":{"rendered":"https:\/\/docs.yithemes.com\/yith-proteo\/?p=209"},"modified":"2021-04-21T16:32:25","modified_gmt":"2021-04-21T16:32:25","slug":"typography","status":"publish","type":"post","link":"https:\/\/docs.yithemes.com\/yith-proteo\/theme-options\/typography\/","title":{"rendered":"Typography"},"content":{"rendered":"<p>In the <strong>Typography\u00a0<\/strong>menu you will be able to customize every option related to text, with custom settings for every kind of <strong>heading<\/strong>.<\/p>\n<p><a href=\"https:\/\/docs.yithemes.com\/yith-proteo\/wp-content\/uploads\/sites\/184\/2020\/05\/Typography-6.jpg\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"no-shadow alignnone wp-image-913 size-full\" src=\"https:\/\/docs.yithemes.com\/yith-proteo\/wp-content\/uploads\/sites\/184\/2020\/05\/Typography-6.jpg\" alt=\"Typography\" width=\"1875\" height=\"1367\" srcset=\"https:\/\/docs.yithemes.com\/yith-proteo\/wp-content\/uploads\/sites\/184\/2020\/05\/Typography-6.jpg 1875w, https:\/\/docs.yithemes.com\/yith-proteo\/wp-content\/uploads\/sites\/184\/2020\/05\/Typography-6-300x219.jpg 300w, https:\/\/docs.yithemes.com\/yith-proteo\/wp-content\/uploads\/sites\/184\/2020\/05\/Typography-6-1024x747.jpg 1024w, https:\/\/docs.yithemes.com\/yith-proteo\/wp-content\/uploads\/sites\/184\/2020\/05\/Typography-6-768x560.jpg 768w, https:\/\/docs.yithemes.com\/yith-proteo\/wp-content\/uploads\/sites\/184\/2020\/05\/Typography-6-1536x1120.jpg 1536w\" sizes=\"auto, (max-width: 1875px) 100vw, 1875px\" \/><\/a><\/p>\n<h3>Global Typography<\/h3>\n<p>Here you can configure text options for the body text across your website. It is used for <strong><code>&lt;p&gt;<\/code><\/strong> tags and similar. Google fonts are supported. The available options are:<\/p>\n<ul>\n<li>Font<\/li>\n<li>Font weight &amp; style (regular, bold, italics etc.)<\/li>\n<li>Font size<\/li>\n<li>Text color<\/li>\n<li>Links color<\/li>\n<li>Links color on hover<\/li>\n<li>Underlined links: enable this to show links with the traditional underlined style<\/li>\n<\/ul>\n<h3>Heading typography options<\/h3>\n<p>For every heading from H1 to H6, you can separately configure the following options:<\/p>\n<ul>\n<li>Font<\/li>\n<li>Font weight &amp; style (regular, bold, italics etc.)<\/li>\n<li>Font size<\/li>\n<li>Font color<\/li>\n<\/ul>\n<h3>Widget titles<\/h3>\n<p>Here you can configure the style of the titles of all widgets. Google fonts are supported. The available options are:<\/p>\n<ul>\n<li>Font<\/li>\n<li>Font weight &amp; style (regular, bold, italics etc.)<\/li>\n<li>Font size<\/li>\n<li>Font color<\/li>\n<\/ul>\n<h3>Widget content<\/h3>\n<p>Here you can configure the style of the text showing in all the widgets. Google fonts are supported. The available options are:<\/p>\n<ul>\n<li>Font<\/li>\n<li>Font weight &amp; style (regular, bold, italics etc.)<\/li>\n<li>Font size<\/li>\n<li>Font color<\/li>\n<\/ul>\n<h3><strong>Additional Google fonts<\/strong><\/h3>\n<p>If you can&#8217;t find your favourite Google font in the list, no worries, you can add it as well.<\/p>\n<p>Please follow these steps:<\/p>\n<p dir=\"auto\">a) Go to <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/fonts.google.com\/<\/a><\/p>\n<p dir=\"auto\">b) Select the font you want to use (i.e. Roboto)<\/p>\n<p>c) Customize the font as you wish by choosing the font weight and style you want to use.<\/p>\n<p>d) Copy the href link from Google Font. It should be something like<\/p>\n<pre>https:\/\/fonts.googleapis.com\/css?family=Roboto:300,400,500,600,700&amp;display=swap<\/pre>\n<p><a href=\"https:\/\/docs.yithemes.com\/yith-proteo\/wp-content\/uploads\/sites\/184\/2020\/05\/Google-fonts.jpg\" data-rel=\"lightbox-image-1\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-567\" src=\"https:\/\/docs.yithemes.com\/yith-proteo\/wp-content\/uploads\/sites\/184\/2020\/05\/Google-fonts.jpg\" alt=\"Additional Google font\" width=\"2487\" height=\"1262\" srcset=\"https:\/\/docs.yithemes.com\/yith-proteo\/wp-content\/uploads\/sites\/184\/2020\/05\/Google-fonts.jpg 2487w, https:\/\/docs.yithemes.com\/yith-proteo\/wp-content\/uploads\/sites\/184\/2020\/05\/Google-fonts-300x152.jpg 300w, https:\/\/docs.yithemes.com\/yith-proteo\/wp-content\/uploads\/sites\/184\/2020\/05\/Google-fonts-1024x520.jpg 1024w, https:\/\/docs.yithemes.com\/yith-proteo\/wp-content\/uploads\/sites\/184\/2020\/05\/Google-fonts-768x390.jpg 768w, https:\/\/docs.yithemes.com\/yith-proteo\/wp-content\/uploads\/sites\/184\/2020\/05\/Google-fonts-1536x779.jpg 1536w, https:\/\/docs.yithemes.com\/yith-proteo\/wp-content\/uploads\/sites\/184\/2020\/05\/Google-fonts-2048x1039.jpg 2048w\" sizes=\"auto, (max-width: 2487px) 100vw, 2487px\" \/><\/a><\/p>\n<p>e) Visit your site and navigate to <strong>Appearance &gt; Customize &gt; YITH Theme Options &gt; Typography &gt; Additional Google Font<\/strong><\/p>\n<p>e) Paste the link into the text area.<\/p>\n<p>f) Now navigate to <strong>Appearance &gt; Customize &gt; Additional CSS<\/strong> and add the following rule:<\/p>\n<pre>body {\r\nfont-family: 'Roboto', sans-serif;\r\n}<\/pre>\n<p>Here is another rule example based on the Montserrat font (the Proteo default font)<\/p>\n<pre>body {\r\nfont-family: 'Montserrat', sans-serif;\r\n}<\/pre>\n<p>Please note that this rule depends on the font you choose. Google Font helps you identify the right rule to use inside the &#8220;CSS rules to specify families&#8221;:<\/p>\n<p><a href=\"https:\/\/docs.yithemes.com\/yith-proteo\/wp-content\/uploads\/sites\/184\/2020\/05\/CSS-rules-font-families.jpg\" data-rel=\"lightbox-image-2\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-568\" src=\"https:\/\/docs.yithemes.com\/yith-proteo\/wp-content\/uploads\/sites\/184\/2020\/05\/CSS-rules-font-families.jpg\" alt=\"\" width=\"406\" height=\"538\" srcset=\"https:\/\/docs.yithemes.com\/yith-proteo\/wp-content\/uploads\/sites\/184\/2020\/05\/CSS-rules-font-families.jpg 406w, https:\/\/docs.yithemes.com\/yith-proteo\/wp-content\/uploads\/sites\/184\/2020\/05\/CSS-rules-font-families-226x300.jpg 226w\" sizes=\"auto, (max-width: 406px) 100vw, 406px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the Typography\u00a0menu you will be able to customize every option related to text, with custom settings for every kind of heading. Global Typography Here you can configure text options for the body text across your website. It is used for &lt;p&gt; tags and similar. Google fonts are supported. The available options are: Font Font &hellip; <a href=\"https:\/\/docs.yithemes.com\/yith-proteo\/theme-options\/typography\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Typography<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-209","post","type-post","status-publish","format-standard","hentry","category-theme-options"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.8.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Typography - YITH Proteo theme<\/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.yithemes.com\/yith-proteo\/theme-options\/typography\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Typography - YITH Proteo theme\" \/>\n<meta property=\"og:description\" content=\"In the Typography\u00a0menu you will be able to customize every option related to text, with custom settings for every kind of heading. Global Typography Here you can configure text options for the body text across your website. It is used for &lt;p&gt; tags and similar. Google fonts are supported. The available options are: Font Font &hellip; Continue reading Typography\" \/>\n<meta property=\"og:url\" content=\"https:\/\/docs.yithemes.com\/yith-proteo\/theme-options\/typography\/\" \/>\n<meta property=\"og:site_name\" content=\"YITH Proteo theme\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-04T13:44:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-04-21T16:32:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/docs.yithemes.com\/yith-proteo\/wp-content\/uploads\/sites\/184\/2020\/05\/Typography-6.jpg\" \/>\n<meta name=\"author\" content=\"francgrasso\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"francgrasso\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/docs.yithemes.com\/yith-proteo\/theme-options\/typography\/\",\"url\":\"https:\/\/docs.yithemes.com\/yith-proteo\/theme-options\/typography\/\",\"name\":\"Typography - YITH Proteo theme\",\"isPartOf\":{\"@id\":\"https:\/\/docs.yithemes.com\/yith-proteo\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/docs.yithemes.com\/yith-proteo\/theme-options\/typography\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/docs.yithemes.com\/yith-proteo\/theme-options\/typography\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/docs.yithemes.com\/yith-proteo\/wp-content\/uploads\/sites\/184\/2020\/05\/Typography-6.jpg\",\"datePublished\":\"2020-05-04T13:44:04+00:00\",\"dateModified\":\"2021-04-21T16:32:25+00:00\",\"author\":{\"@id\":\"https:\/\/docs.yithemes.com\/yith-proteo\/#\/schema\/person\/2942c5a68785e594ba5a5a6f6d7e5fbc\"},\"breadcrumb\":{\"@id\":\"https:\/\/docs.yithemes.com\/yith-proteo\/theme-options\/typography\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/docs.yithemes.com\/yith-proteo\/theme-options\/typography\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/docs.yithemes.com\/yith-proteo\/theme-options\/typography\/#primaryimage\",\"url\":\"https:\/\/docs.yithemes.com\/yith-proteo\/wp-content\/uploads\/sites\/184\/2020\/05\/Typography-6.jpg\",\"contentUrl\":\"https:\/\/docs.yithemes.com\/yith-proteo\/wp-content\/uploads\/sites\/184\/2020\/05\/Typography-6.jpg\",\"width\":1875,\"height\":1367,\"caption\":\"Typography\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/docs.yithemes.com\/yith-proteo\/theme-options\/typography\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/docs.yithemes.com\/yith-proteo\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Typography\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/docs.yithemes.com\/yith-proteo\/#website\",\"url\":\"https:\/\/docs.yithemes.com\/yith-proteo\/\",\"name\":\"YITH Proteo theme\",\"description\":\"User guide documentation\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/docs.yithemes.com\/yith-proteo\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/docs.yithemes.com\/yith-proteo\/#\/schema\/person\/2942c5a68785e594ba5a5a6f6d7e5fbc\",\"name\":\"francgrasso\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/docs.yithemes.com\/yith-proteo\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9d1024f36f1f66ab9c3ae20ad0b35d52?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9d1024f36f1f66ab9c3ae20ad0b35d52?s=96&d=mm&r=g\",\"caption\":\"francgrasso\"},\"url\":\"https:\/\/docs.yithemes.com\/yith-proteo\/author\/francgrasso\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Typography - YITH Proteo theme","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.yithemes.com\/yith-proteo\/theme-options\/typography\/","og_locale":"en_US","og_type":"article","og_title":"Typography - YITH Proteo theme","og_description":"In the Typography\u00a0menu you will be able to customize every option related to text, with custom settings for every kind of heading. Global Typography Here you can configure text options for the body text across your website. It is used for &lt;p&gt; tags and similar. Google fonts are supported. The available options are: Font Font &hellip; Continue reading Typography","og_url":"https:\/\/docs.yithemes.com\/yith-proteo\/theme-options\/typography\/","og_site_name":"YITH Proteo theme","article_published_time":"2020-05-04T13:44:04+00:00","article_modified_time":"2021-04-21T16:32:25+00:00","og_image":[{"url":"https:\/\/docs.yithemes.com\/yith-proteo\/wp-content\/uploads\/sites\/184\/2020\/05\/Typography-6.jpg","type":"","width":"","height":""}],"author":"francgrasso","twitter_card":"summary_large_image","twitter_misc":{"Written by":"francgrasso","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/docs.yithemes.com\/yith-proteo\/theme-options\/typography\/","url":"https:\/\/docs.yithemes.com\/yith-proteo\/theme-options\/typography\/","name":"Typography - YITH Proteo theme","isPartOf":{"@id":"https:\/\/docs.yithemes.com\/yith-proteo\/#website"},"primaryImageOfPage":{"@id":"https:\/\/docs.yithemes.com\/yith-proteo\/theme-options\/typography\/#primaryimage"},"image":{"@id":"https:\/\/docs.yithemes.com\/yith-proteo\/theme-options\/typography\/#primaryimage"},"thumbnailUrl":"https:\/\/docs.yithemes.com\/yith-proteo\/wp-content\/uploads\/sites\/184\/2020\/05\/Typography-6.jpg","datePublished":"2020-05-04T13:44:04+00:00","dateModified":"2021-04-21T16:32:25+00:00","author":{"@id":"https:\/\/docs.yithemes.com\/yith-proteo\/#\/schema\/person\/2942c5a68785e594ba5a5a6f6d7e5fbc"},"breadcrumb":{"@id":"https:\/\/docs.yithemes.com\/yith-proteo\/theme-options\/typography\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/docs.yithemes.com\/yith-proteo\/theme-options\/typography\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/docs.yithemes.com\/yith-proteo\/theme-options\/typography\/#primaryimage","url":"https:\/\/docs.yithemes.com\/yith-proteo\/wp-content\/uploads\/sites\/184\/2020\/05\/Typography-6.jpg","contentUrl":"https:\/\/docs.yithemes.com\/yith-proteo\/wp-content\/uploads\/sites\/184\/2020\/05\/Typography-6.jpg","width":1875,"height":1367,"caption":"Typography"},{"@type":"BreadcrumbList","@id":"https:\/\/docs.yithemes.com\/yith-proteo\/theme-options\/typography\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/docs.yithemes.com\/yith-proteo\/"},{"@type":"ListItem","position":2,"name":"Typography"}]},{"@type":"WebSite","@id":"https:\/\/docs.yithemes.com\/yith-proteo\/#website","url":"https:\/\/docs.yithemes.com\/yith-proteo\/","name":"YITH Proteo theme","description":"User guide documentation","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/docs.yithemes.com\/yith-proteo\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/docs.yithemes.com\/yith-proteo\/#\/schema\/person\/2942c5a68785e594ba5a5a6f6d7e5fbc","name":"francgrasso","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/docs.yithemes.com\/yith-proteo\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9d1024f36f1f66ab9c3ae20ad0b35d52?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9d1024f36f1f66ab9c3ae20ad0b35d52?s=96&d=mm&r=g","caption":"francgrasso"},"url":"https:\/\/docs.yithemes.com\/yith-proteo\/author\/francgrasso\/"}]}},"_links":{"self":[{"href":"https:\/\/docs.yithemes.com\/yith-proteo\/wp-json\/wp\/v2\/posts\/209","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.yithemes.com\/yith-proteo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.yithemes.com\/yith-proteo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.yithemes.com\/yith-proteo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.yithemes.com\/yith-proteo\/wp-json\/wp\/v2\/comments?post=209"}],"version-history":[{"count":16,"href":"https:\/\/docs.yithemes.com\/yith-proteo\/wp-json\/wp\/v2\/posts\/209\/revisions"}],"predecessor-version":[{"id":918,"href":"https:\/\/docs.yithemes.com\/yith-proteo\/wp-json\/wp\/v2\/posts\/209\/revisions\/918"}],"wp:attachment":[{"href":"https:\/\/docs.yithemes.com\/yith-proteo\/wp-json\/wp\/v2\/media?parent=209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.yithemes.com\/yith-proteo\/wp-json\/wp\/v2\/categories?post=209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.yithemes.com\/yith-proteo\/wp-json\/wp\/v2\/tags?post=209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}