{"id":67,"date":"2024-12-16T10:45:40","date_gmt":"2024-12-16T10:45:40","guid":{"rendered":"https:\/\/docs.codevibrant.com\/yaatra\/?p=67"},"modified":"2024-12-17T10:28:10","modified_gmt":"2024-12-17T10:28:10","slug":"customize-your-sites-font-with-yaatra-pro","status":"publish","type":"post","link":"https:\/\/docs.codevibrant.com\/yaatra\/customize-your-sites-font-with-yaatra-pro\/","title":{"rendered":"Customize your site&#8217;s Fonts with Yaatra Pro"},"content":{"rendered":"<div class=\"mt-docs-green-note\">\n<p>This feature is in the pro version of Yaatra. Please make sure to purchase the Yaatra Pro to enable this feature on your website<\/p>\n<\/div>\n\n<p>Fonts are a crucial element of your website, particularly for blogs. Ensuring that your typography is legible and easy on the eyes is very essential. It also plays a significant role in enhancing your users&#8217; reading experience. Given these factors, it&#8217;s clear that your website requires appropriate customization options for your themes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"515\" src=\"http:\/\/docs.codevibrant.com\/yaatra\/wp-content\/uploads\/sites\/6\/2024\/12\/Typography-Settings-1024x515.jpg\" alt=\"Typography Settings\" class=\"wp-image-73\" srcset=\"https:\/\/docs.codevibrant.com\/yaatra\/wp-content\/uploads\/sites\/6\/2024\/12\/Typography-Settings-1024x515.jpg 1024w, https:\/\/docs.codevibrant.com\/yaatra\/wp-content\/uploads\/sites\/6\/2024\/12\/Typography-Settings-300x151.jpg 300w, https:\/\/docs.codevibrant.com\/yaatra\/wp-content\/uploads\/sites\/6\/2024\/12\/Typography-Settings-768x387.jpg 768w, https:\/\/docs.codevibrant.com\/yaatra\/wp-content\/uploads\/sites\/6\/2024\/12\/Typography-Settings.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Yaatra Pro provides you with wide range of configuration possibilities in regards for your typography. You can customize your fonts in multiple aspects and present them to your readers<\/p>\n\n\n\n<p>Let\u2019s see how to do that, shall we?<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigate yourself from main section of the customize bar to Typography settings,&nbsp;<strong>General Settings&gt;&gt;Typography<\/strong><\/li>\n<\/ul>\n\n\n\n<p>There are two different options for you to select, after opening Typography setting bar.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Body:&nbsp;<\/strong>Here, you can change the fonts of text that is showed in Body of your Archive\/Blog, Page, and Posts<\/li>\n\n\n\n<li><strong>Heading:&nbsp;<\/strong>In this section, you can change fonts of the heading of your Archive\/Blog, Page, and Posts<\/li>\n\n\n\n<li><strong>Primary Menu<\/strong>: Within primary menu, you can customize the fonts including their styles, weights and many more thoroughly.<\/li>\n<\/ul>\n\n\n\n<p><div class=\"mt-docs-green-note\"><p>Except for Primary Menu,You can also customize the font colors for your Header and Body fonts<\/p><\/div><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Now, whether you go to Body, Primary Menu or Heading option, the settings are made similar for you so that you can efficiently change the typography of both of your headings and body\u2019s font.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Let\u2019s look at what are in the inside settings of Typography:<\/h2>\n\n\n\n<p>You can customize your fonts in 8 different ways (<em>7 in Primary Menu settings<\/em>)<\/p>\n\n\n\n<p><strong>Font Family:\u00a0<\/strong>You will have <strong>950 <\/strong>different font families to choose from\u00a0<strong>Font Family.\u00a0<\/strong>You can choose any one of them based on your preference.<\/p>\n\n\n\n<p><strong>Font Weight;&nbsp;<\/strong>Font weight determines the weight of your font, or you can call it boldness. The option ranges from \u201c<strong>Normal 400<\/strong>\u201d to \u201c<strong>Bold 700<\/strong>\u201d.<\/p>\n\n\n\n<p><strong>Font Style:&nbsp;<\/strong>There are two basic options for you to choose in this category, Normal gives you normal text style like any other text here and Italic gives you italic style text like this:&nbsp;<em>\u2018Yaatra Blog\u2019.<\/em><\/p>\n\n\n\n<p><strong>Font Transform;<\/strong>&nbsp;You can automatically transform your text, whether it may be your&nbsp;<strong>Body text<\/strong>&nbsp;or&nbsp;<strong>Heading<\/strong>&nbsp;to&nbsp;<strong>CAPITALIZE, UpperCase and lowercase.<\/strong><\/p>\n\n\n\n<p><strong>Font Decoration:&nbsp;<\/strong>In this option, you can either&nbsp;<strong><u>underline<\/u><\/strong>&nbsp;your text or make a&nbsp;<strong>line-through<\/strong>&nbsp;text like this: \u2018<s>Yaatra Blog<\/s>\u2019<\/p>\n\n\n\n<p><em>You can Inherit the font size, from your previous settings just by selecting&nbsp;<strong>Inherit&nbsp;<\/strong>option in&nbsp;<strong>Font Weight, Font Style, Font Transform, and Font Decoration.<\/strong><\/em><\/p>\n\n\n\n<p><strong>Font Size Slider<\/strong>: With this option, you can change your Font&#8217;s size with the help of the given slider or you can also add it manually from the <strong>box<\/strong> at the right side of the slider.<\/p>\n\n\n\n<p><strong>Font Line Height Slider<\/strong>: Line Height Slider helps you with adjusting the line height of your contents to your preferred size. You can use the slider to do so or manually type in your size in the given box at the side.<\/p>\n\n\n\n<p><em>Furthermore, you can see the result of your changes on various devices directly from your customizer by clicking on the <img loading=\"lazy\" decoding=\"async\" width=\"68\" height=\"27\" class=\"wp-image-71\" style=\"width: 68px;\" src=\"http:\/\/docs.codevibrant.com\/yaatra\/wp-content\/uploads\/sites\/6\/2024\/12\/responsiveness.jpg\" alt=\"\"> icons beside the sliders.<\/em><\/p>\n\n\n\n<p><strong>This method is same for Heading and Primary section as well<\/strong><\/p>\n\n\n\n<p>Font Color: Change your fonts color efficiently just by clicking on your preferred colors from the palette for your fonts. (<em>This is not available in Primary Menu Typography settings<\/em>.)<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"224\" height=\"614\" src=\"http:\/\/docs.codevibrant.com\/yaatra\/wp-content\/uploads\/sites\/6\/2024\/12\/Typography-in-Yaatra-Pro.jpg\" alt=\"Typography in Yaatra Pro\" class=\"wp-image-70\" srcset=\"https:\/\/docs.codevibrant.com\/yaatra\/wp-content\/uploads\/sites\/6\/2024\/12\/Typography-in-Yaatra-Pro.jpg 224w, https:\/\/docs.codevibrant.com\/yaatra\/wp-content\/uploads\/sites\/6\/2024\/12\/Typography-in-Yaatra-Pro-109x300.jpg 109w\" sizes=\"auto, (max-width: 224px) 100vw, 224px\" \/><\/figure><\/div>","protected":false},"excerpt":{"rendered":"<p>This feature is in the pro version of Yaatra. Please make sure to purchase the Yaatra Pro to enable this feature on your website Fonts are a crucial element of your website, particularly for blogs. Ensuring that your typography is legible and easy on the eyes is very essential. It also plays a significant role [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-67","post","type-post","status-publish","format-standard","hentry","category-general-settings"],"_links":{"self":[{"href":"https:\/\/docs.codevibrant.com\/yaatra\/wp-json\/wp\/v2\/posts\/67","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.codevibrant.com\/yaatra\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.codevibrant.com\/yaatra\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.codevibrant.com\/yaatra\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.codevibrant.com\/yaatra\/wp-json\/wp\/v2\/comments?post=67"}],"version-history":[{"count":6,"href":"https:\/\/docs.codevibrant.com\/yaatra\/wp-json\/wp\/v2\/posts\/67\/revisions"}],"predecessor-version":[{"id":90,"href":"https:\/\/docs.codevibrant.com\/yaatra\/wp-json\/wp\/v2\/posts\/67\/revisions\/90"}],"wp:attachment":[{"href":"https:\/\/docs.codevibrant.com\/yaatra\/wp-json\/wp\/v2\/media?parent=67"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.codevibrant.com\/yaatra\/wp-json\/wp\/v2\/categories?post=67"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.codevibrant.com\/yaatra\/wp-json\/wp\/v2\/tags?post=67"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}