{"id":6741,"date":"2021-12-13T12:47:00","date_gmt":"2021-12-13T12:47:00","guid":{"rendered":"https:\/\/test.zakratheme.com\/blog\/?p=6741"},"modified":"2021-12-13T10:33:31","modified_gmt":"2021-12-13T10:33:31","slug":"how-to-change-font-in-wordpress","status":"publish","type":"post","link":"https:\/\/zakratheme.com\/blog\/how-to-change-font-in-wordpress\/","title":{"rendered":"How to Change Font in WordPress 2021? (Font Style, Size, Color on Any Theme)"},"content":{"rendered":"\n<p>Don\u2019t know how to change font in WordPress? Don\u2019t worry; we\u2019ve got you covered.&nbsp;<\/p>\n\n\n\n<p>Having the same font style, font size, and font color on all your pages and posts makes your site dull and unimpressive. Thankfully WordPress offers an opportunity to change the font.&nbsp;<\/p>\n\n\n\n<p>In this article, we\u2019ve explained different ways on how to change font in WordPress. Hence, keep reading.&nbsp;<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_75 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #004846;color:#004846\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #004846;color:#004846\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/zakratheme.com\/blog\/how-to-change-font-in-wordpress\/#why-change-font-in-wordpress\" >Why Change Font in WordPress?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/zakratheme.com\/blog\/how-to-change-font-in-wordpress\/#change-font-using-theme-customizer\" >Change Font Using Theme Customizer&nbsp;<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/zakratheme.com\/blog\/how-to-change-font-in-wordpress\/#how-to-change-global-font-in-zakra\" >How to Change Global Font in Zakra?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/zakratheme.com\/blog\/how-to-change-font-in-wordpress\/#how-to-individually-change-header-and-content-font-in-zakra\" >How to Individually Change Header and Content Font in Zakra?&nbsp;<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/zakratheme.com\/blog\/how-to-change-font-in-wordpress\/#change-font-in-wordpress-using-block-editor-gutenberg\" >Change Font in WordPress Using Block Editor (Gutenberg)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/zakratheme.com\/blog\/how-to-change-font-in-wordpress\/#change-font-in-wordpress-using-classic-editor\" >Change Font in WordPress Using Classic Editor<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/zakratheme.com\/blog\/how-to-change-font-in-wordpress\/#change-font-in-wordpress-using-additional-css\" >Change Font in WordPress Using Additional CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/zakratheme.com\/blog\/how-to-change-font-in-wordpress\/#wrapping-it-up\" >Wrapping It Up!<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"why-change-font-in-wordpress\"><\/span>Why Change Font in WordPress?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Adding different font sizes for separate heading makes your page\/post eye-catchy. Moreover, this also increases the readability of your page\/post. Besides, pages and posts with more excellent readability tend to rank higher on the <strong>Search Engine Results Pages (SERPs)<\/strong>.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"770\" height=\"380\" src=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/SERP-Page.png\" alt=\"SERP Page\" class=\"wp-image-6898\" srcset=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/SERP-Page.png 770w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/SERP-Page-300x148.png 300w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/SERP-Page-768x379.png 768w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n\n\n\n<p>Different font styles and colors can also increase the attractiveness of your site. We all know how important first impressions are. Hence, changing font in WordPress can help you improve the front-end of your site and attract more customers.&nbsp;<\/p>\n\n\n\n<p>With that said, we\u2019ll guide you on how to change font in WordPress website. Also, you can change fonts on individual posts and pages. And, if you\u2019ve some coding knowledge, WordPress also allows you to use codes to change the font as per your need.&nbsp;<\/p>\n\n\n\n<p>So, without further ado, let\u2019s get started.&nbsp;<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"change-font-using-theme-customizer\"><\/span>Change Font Using Theme Customizer&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Did you know, the default theme customizer doesn\u2019t provide the option to change the font. However, other themes (apart from default WordPress themes) offer the opportunity to change your font right from the theme customizer panel.&nbsp;<\/p>\n\n\n\n<p>For this tutorial, we\u2019ll use one of the most popular <a href=\"https:\/\/zakratheme.com\/blog\/best-wordpress-multipurpose-themes-and-templates\/\">multipurpose WordPress themes<\/a> &#8211; Zakra. As it\u2019s a multipurpose theme, you can use it to create any niche website\u2014sites such as <strong><a href=\"https:\/\/zakratheme.com\/blog\/how-to-build-a-business-website-in-wordpress\/\">Business<\/a><\/strong>, <strong><a href=\"https:\/\/zakratheme.com\/blog\/how-to-build-wordpress-ecommerce-website\/\">eCommerce<\/a><\/strong>, <strong><a href=\"https:\/\/zakratheme.com\/blog\/how-to-start-a-wordpress-blog\/\">Blog<\/a><\/strong>, etc., to name a few.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"770\" height=\"350\" src=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/06\/Zakra.png\" alt=\"Zakra\" class=\"wp-image-5105\" srcset=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/06\/Zakra.png 770w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/06\/Zakra-300x136.png 300w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/06\/Zakra-768x349.png 768w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n\n\n\n<p>Besides, it\u2019s highly customizable. Also, it looks great on any digital device such as mobile, laptop, tablet, and more. You don\u2019t have to worry about the theme slowing down your website. That\u2019s because it\u2019s <a href=\"https:\/\/zakratheme.com\/blog\/how-to-speed-up-your-wordpress-site\/\">optimized for speed <\/a>as well as <a href=\"https:\/\/zakratheme.com\/blog\/how-to-improve-seo-on-wordpress\/\">SEO optimized<\/a>.&nbsp;<\/p>\n\n\n\n<p>With that in mind, let\u2019s change the font using the theme customizer in the Zakra theme. Of course, first of all, you\u2019ve to <a href=\"https:\/\/zakratheme.com\/blog\/how-to-install-and-customize-zakra-theme\/\">install and activate the theme<\/a>. Also, Zakra offers <a href=\"https:\/\/zakratheme.com\/starter-sites\/\" target=\"_blank\" rel=\"noreferrer noopener\">65+ ready-to-import demos<\/a> for every niche article. So go ahead and <a href=\"https:\/\/zakratheme.com\/blog\/how-to-import-wordpress-theme-demo-content\/\">import a suitable demo<\/a> for your website.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"how-to-change-global-font-in-zakra\"><\/span>How to Change Global Font in Zakra?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Now, let\u2019s change the font of your website using the theme customizer. From your WordPress dashboard, navigate to <strong>Appearance &gt;&gt; Customize<\/strong>. This takes you to the theme customizer page.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"448\" height=\"350\" src=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Customization-Navigation.png\" alt=\"Customization Navigation\" class=\"wp-image-6745\" srcset=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Customization-Navigation.png 448w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Customization-Navigation-300x234.png 300w\" sizes=\"(max-width: 448px) 100vw, 448px\" \/><\/figure><\/div>\n\n\n\n<p>You can see different customization menus on the left side, such as Global, Header, Content, Footer, etc. Similarly, you can see the preview of the theme demo you\u2019ve imported on the right side.&nbsp;<\/p>\n\n\n\n<p>Select the <strong>Global<\/strong> option from the sidebar menu if you want the same typography and heading throughout the site.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"400\" src=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Global-Settings.png\" alt=\"Global Settings\" class=\"wp-image-6852\" srcset=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Global-Settings.png 770w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Global-Settings-300x156.png 300w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Global-Settings-768x399.png 768w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n\n\n\n<p>Under Global settings, there are further other options as well. Now, choose the option <strong>Typography <\/strong>from the left sidebar menu.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"305\" height=\"376\" src=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Global-Typography.png\" alt=\"Global Typography\" class=\"wp-image-6854\" srcset=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Global-Typography.png 305w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Global-Typography-243x300.png 243w\" sizes=\"(max-width: 305px) 100vw, 305px\" \/><\/figure><\/div>\n\n\n\n<p>Zakra theme customizer offers two different typography options: <strong>Base Typography<\/strong> and <strong>Headings (H1 &#8211; H6)<\/strong>. Let\u2019s discuss these two options below:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"298\" height=\"234\" src=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Options-of-Typography.png\" alt=\"Options of Typography\" class=\"wp-image-6863\"\/><\/figure><\/div>\n\n\n\n<p><strong>Base Typography<\/strong>: With the help of this feature, you can change the font size, font color, and font style with ease. This option has further different setting options &#8211;<strong> Body <\/strong>and<strong> Heading<\/strong>.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Body<\/strong>: In this option, you can change the <strong>Font Family<\/strong>, <strong>Weight<\/strong>, <strong>Size<\/strong>, and <strong>Line-Height<\/strong>. Additionally, you can choose the <strong>Style<\/strong> between Normal, Italic, Oblique, Initial, and Inherit. Likewise, Zakra provides an option to <strong>Transform<\/strong> the content to Capitalize, Uppercase, Lowercase, Initial, and Inherit.&nbsp;Inherit option, as the name suggests, inherits the typography from its parent theme. On the other hand, choosing the Initial option will reset the font to default.&nbsp;<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Heading<\/strong>: Change the <strong>Font Family<\/strong>, <strong>Weight<\/strong>, <strong>Line-Height<\/strong>, <strong>Style<\/strong>, and <strong>Transform<\/strong> the headings of your site with the help of this option.&nbsp;<\/li><\/ul>\n\n\n\n<p><strong>Headings (H1 &#8211; H6): <\/strong>The Heading option on Base Typography is used to change the typography of all headings from H1 &#8211; H6 at the same time. If you want to separately change headings <strong>H1 &#8211; H6<\/strong> then, this option comes in handy.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"294\" height=\"389\" src=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Heading-Typography.png\" alt=\"Heading Typography\" class=\"wp-image-6868\" srcset=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Heading-Typography.png 294w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Heading-Typography-227x300.png 227w\" sizes=\"(max-width: 294px) 100vw, 294px\" \/><\/figure><\/div>\n\n\n\n<p>Click on the pencil icon next to each heading, and you can change the <strong>Font Family<\/strong>, <strong>Weight<\/strong>, <strong>Size<\/strong>, <strong>Line-Height<\/strong>, <strong>Style<\/strong>, <strong>Transform<\/strong>,<strong> <\/strong>etc. as shown in the image above. &nbsp;<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"how-to-individually-change-header-and-content-font-in-zakra\"><\/span>How to Individually Change Header and Content Font in Zakra?&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The above method is to change the typography globally. However, <a href=\"https:\/\/zakratheme.com\/\">Zakra<\/a> provides the option to change the typography of the Header, Footer, Sidebar, and Post\/Page title individually.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Change Header Font&nbsp;<\/h4>\n\n\n\n<p>To change the typography of the menus located at the header, navigate to the <strong>Header<\/strong> menu from the sidebar of the theme customizer page.&nbsp;Next, select the <strong>Menu<\/strong> option.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"292\" src=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Menu.png\" alt=\"How to Change Font in WordPress Menu\" class=\"wp-image-6839\" srcset=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Menu.png 770w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Menu-300x114.png 300w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Menu-768x291.png 768w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n\n\n\n<p>Among the four different options under the <strong>Menu<\/strong> option, navigate to <strong>Primary Menu: Menu Item<\/strong>.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"294\" height=\"302\" src=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Primary-Menu.png\" alt=\"Primary Menu\" class=\"wp-image-6870\" srcset=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Primary-Menu.png 294w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Primary-Menu-292x300.png 292w\" sizes=\"(max-width: 294px) 100vw, 294px\" \/><\/figure><\/div>\n\n\n\n<p>You can see the <strong>Typography<\/strong> option to change the Font Family, Weight, Size, Line-Height, Style, and Transform.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"238\" height=\"396\" src=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Primary-Menu-Typography.png\" alt=\"Primary Menu Typography\n\" class=\"wp-image-6872\" srcset=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Primary-Menu-Typography.png 238w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Primary-Menu-Typography-180x300.png 180w\" sizes=\"(max-width: 238px) 100vw, 238px\" \/><\/figure><\/div>\n\n\n\n<p>To change the font of the dropdown menu, go back, and select the <strong>Primary Menu: Dropdown Item<\/strong> option. This option allows you to change the font of the dropdown menu.&nbsp;Similarly, you can change the <strong>Mobile Menu<\/strong> typography as well.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"271\" height=\"280\" src=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Dropdown-Menu-and-Mobile-Menu.png\" alt=\"Dropdown Menu and Mobile Menu\" class=\"wp-image-6874\"\/><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Change Post\/Page Title and Sidebar Font<\/h4>\n\n\n\n<p>Select the <strong>Content<\/strong> option from the sidebar of the theme customizer page.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"350\" src=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Content-Option.png\" alt=\"Content Option\" class=\"wp-image-6877\" srcset=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Content-Option.png 770w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Content-Option-300x136.png 300w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Content-Option-768x349.png 768w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n\n\n\n<p>In order to change the font of the Page\/Post title, choose the <strong>Page Header <\/strong>option.&nbsp;&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"296\" height=\"339\" src=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Page-Header-Typography.png\" alt=\"Page Header Typography\" class=\"wp-image-6879\" srcset=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Page-Header-Typography.png 296w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Page-Header-Typography-262x300.png 262w\" sizes=\"(max-width: 296px) 100vw, 296px\" \/><\/figure><\/div>\n\n\n\n<p>Scroll all the way down, and you\u2019ll find the <strong>Typography<\/strong> option. Change the font of the post\/page title as per your preference.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"290\" height=\"225\" src=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Post-and-Page-Title-Typography.png\" alt=\"Post and Page Title Typography\" class=\"wp-image-6881\"\/><\/figure><\/div>\n\n\n\n<p>Correspondingly, if you wish to change the font of the blog title, click on the <strong>Blog\/Archive<\/strong>.&nbsp;Next, please scroll down and change the <strong>Blog\/Archive Post Title<\/strong>\u2019s typography however it seems fit.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"296\" height=\"344\" src=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Blog-and-Archive-Typography.png\" alt=\"Blog and Archive Typography\" class=\"wp-image-6883\" srcset=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Blog-and-Archive-Typography.png 296w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Blog-and-Archive-Typography-258x300.png 258w\" sizes=\"(max-width: 296px) 100vw, 296px\" \/><\/figure><\/div>\n\n\n\n<p>Now, click on the <strong>Sidebar<\/strong> option in order to change the font of the sidebar of your site.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"299\" height=\"344\" src=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Sidebar-Typography.png\" alt=\"Sidebar Typography\" class=\"wp-image-6885\" srcset=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Sidebar-Typography.png 299w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Sidebar-Typography-261x300.png 261w\" sizes=\"(max-width: 299px) 100vw, 299px\" \/><\/figure><\/div>\n\n\n\n<p>Change the font of <strong>Sidebar Title<\/strong> and <strong>Sidebar Content<\/strong> individually.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"297\" height=\"309\" src=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Sidebar-Typography-Options.png\" alt=\"Sidebar Typography Options\" class=\"wp-image-6887\" srcset=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Sidebar-Typography-Options.png 297w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Sidebar-Typography-Options-288x300.png 288w\" sizes=\"(max-width: 297px) 100vw, 297px\" \/><\/figure><\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"change-font-in-wordpress-using-block-editor-gutenberg\"><\/span>Change Font in WordPress Using Block Editor (Gutenberg)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>WordPress also allows you to change the font using Gutenberg block editor. For that, go back to your WordPress dashboard. Now, navigate to <strong>Pages &gt;&gt; All Pages<\/strong>.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"452\" height=\"279\" src=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/08\/Page-Navigation.png\" alt=\"Page Navigation\" class=\"wp-image-6627\" srcset=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/08\/Page-Navigation.png 452w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/08\/Page-Navigation-300x185.png 300w\" sizes=\"(max-width: 452px) 100vw, 452px\" \/><\/figure><\/div>\n\n\n\n<p>Hover over to the page you want to change the font of and click on the <strong>Edit<\/strong> option. This takes you to the WordPress editor page.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"280\" src=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Edit-page.png\" alt=\"Edit Page\" class=\"wp-image-6901\" srcset=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Edit-page.png 770w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Edit-page-300x109.png 300w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Edit-page-768x279.png 768w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n\n\n\n<p>Now, select the <strong>Block<\/strong> option located at the top right. Then, click on any block of your choice to change the font.&nbsp;<\/p>\n\n\n\n<p>Below the Block option, the <strong>Typography<\/strong> option is visible. You can select the different <strong>Font Sizes<\/strong> between <strong>Small<\/strong>,<strong> Normal<\/strong>, <strong>Medium<\/strong>, <strong>Large<\/strong>, and <strong>Huge<\/strong>. Besides, a <strong>Custom<\/strong> font size option is also available.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"322\" src=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Gutenberg-Typography.png\" alt=\"Gutenberg Typography\" class=\"wp-image-6903\" srcset=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Gutenberg-Typography.png 770w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Gutenberg-Typography-300x125.png 300w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Gutenberg-Typography-768x321.png 768w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Gutenberg-Typography-720x300.png 720w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n\n\n\n<p>Moreover, you can also change the font color with the help of the option <strong>Color<\/strong>. Along with that, you can also change the <strong>Background Color<\/strong> of the selected block.&nbsp;&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"195\" height=\"385\" src=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Gutenberg-Color.png\" alt=\"Gutenberg Color\" class=\"wp-image-6905\" srcset=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Gutenberg-Color.png 195w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Gutenberg-Color-152x300.png 152w\" sizes=\"(max-width: 195px) 100vw, 195px\" \/><\/figure><\/div>\n\n\n\n<p>Correspondingly, to change the font of posts, go to<strong> Posts &gt;&gt; All Posts<\/strong> from your WordPress dashboard. Then, follow the steps mentioned above.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"430\" height=\"334\" src=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/08\/Post-Navigation.png\" alt=\"Post Navigation\" class=\"wp-image-6603\" srcset=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/08\/Post-Navigation.png 430w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/08\/Post-Navigation-300x233.png 300w\" sizes=\"(max-width: 430px) 100vw, 430px\" \/><\/figure><\/div>\n\n\n\n<p>Once you\u2019re satisfied with the changes, click on the <strong>Update and Publish<\/strong> button at the top right.&nbsp;<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"change-font-in-wordpress-using-classic-editor\"><\/span>Change Font in WordPress Using Classic Editor<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>If you desire to change the font style using a WordPress classic editor then, this section is for you. Go to <strong>Pages &gt;&gt; All Pages<\/strong> from your WordPress dashboard. Hover over to a page and hit the <strong>Edit<\/strong> button.&nbsp;<\/p>\n\n\n\n<p>Select a piece of text. Then, a toolbar appears at the top. You can change the text alignment, thickness and also type from paragraphs to headings (h1-h6). Moreover, you can also choose to create an ordered or unordered list.&nbsp;After all the changes, don\u2019t forget to hit the <strong>Update or Publish<\/strong> button.&nbsp;<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"change-font-in-wordpress-using-additional-css\"><\/span>Change Font in WordPress Using Additional CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Having some coding knowledge can be useful for you. Zakra theme customizer offers the option to add additional CSS. You can find <strong>Additional CSS<\/strong> as the last option on the theme customizer page.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"400\" src=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Additional-CSS.png\" alt=\"Additional CSS\" class=\"wp-image-6890\" srcset=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Additional-CSS.png 770w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Additional-CSS-300x156.png 300w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Additional-CSS-768x399.png 768w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n\n\n\n<p>Other than that, you can make changes to the <strong>style.css<\/strong> file of the WordPress editor. To access the file, navigate to <strong>Appearance &gt;&gt; Theme Editor<\/strong>. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"447\" height=\"348\" src=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Theme-Editor-Navigation.png\" alt=\"Theme Editor Navigation\" class=\"wp-image-6892\" srcset=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Theme-Editor-Navigation.png 447w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Theme-Editor-Navigation-300x234.png 300w\" sizes=\"(max-width: 447px) 100vw, 447px\" \/><\/figure><\/div>\n\n\n\n<p>But, only make changes to this file if you\u2019re 100% sure about what you\u2019re doing. Otherwise, you might end up messing up your theme.&nbsp;After the necessary changes hit the <strong>Update File<\/strong> button. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"380\" src=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Theme-Editor-Page.png\" alt=\"Theme Editor Page\" class=\"wp-image-6894\" srcset=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Theme-Editor-Page.png 770w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Theme-Editor-Page-300x148.png 300w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2021\/09\/Theme-Editor-Page-768x379.png 768w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"wrapping-it-up\"><\/span>Wrapping It Up!<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>And that\u2019s how you can change font in Zakra theme using <a href=\"https:\/\/themegrill.com\/blog\/what-is-wordpress-customizer\/\" target=\"_blank\" rel=\"noreferrer noopener\">theme customizer<\/a>. Furthermore, you can use the block editor and classic editor to change font in WordPress.&nbsp;<\/p>\n\n\n\n<p>However, the block and classic editor don\u2019t provide many options and flexibility like the Zakra theme customizer. Nevertheless, it\u2019s up to you which method you want to choose. Furthermore, you can also add additional CSS if you&#8217;ve any coding knowledge. <\/p>\n\n\n\n<p>Finally, it\u2019s a wrap. We hope you enjoyed reading this article on how to change font in WordPress. And, if you did, take a minute and share it with your friends and family. Besides, here\u2019s an article on <a href=\"https:\/\/zakratheme.com\/blog\/how-to-edit-a-header-in-wordpress\/\">how to edit a header in WordPress<\/a> that might interest you.&nbsp;<\/p>\n\n\n\n<p>Lastly, follow us on <a href=\"https:\/\/twitter.com\/ThemeZakra\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Twitter<\/a> and <a href=\"https:\/\/www.facebook.com\/zakratheme\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Facebook<\/a> for more future updates.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Don\u2019t know how to change font in WordPress? Don\u2019t worry; we\u2019ve got you covered.&nbsp; Having the same font style, font size, and font color on all your pages and posts makes your site dull and unimpressive. Thankfully WordPress offers an opportunity to change the font.&nbsp; In this article, we\u2019ve explained different ways on how to[&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":9696,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"zakra_general_container_width":0,"zakra_general_content_width":0,"zakra_general_sidebar_width":0,"zakra_sticky_header":"customizer","zakra_header_main_area":true,"zakra_site_logo_width":0,"zakra_header_top_enabled":"customizer","zakra_header_top_style":"customizer","zakra_primary_menu_item_style":"customizer","zakra_page_header_text_color":"","zakra_page_header_layout":"customizer","zakra_page_title_bg":"","zakra_footer_widgets_bg_image":0,"zakra_page_title_bg_repeat":"customizer","zakra_page_title_bg_position":"customizer","zakra_page_title_bg_size":"customizer","zakra_page_title_bg_attachment":"customizer","zakra_breadcrumbs_enabled":"customizer","zakra_breadcrumbs_text_color":"","zakra_breadcrumbs_separator_color":"","zakra_breadcrumbs_link_color":"","zakra_breadcrumbs_link_hover_color":"","zakra_page_title_bg_image":0,"zakra_footer_widgets_enabled":"customizer","zakra_footer_column_layout_1_style":"customizer","zakra_footer_widgets_bg":"","zakra_footer_widgets_bg_repeat":"customizer","zakra_footer_widgets_bg_position":"customizer","zakra_footer_widgets_bg_size":"customizer","zakra_footer_widgets_bg_attachment":"customizer","zakra_footer_bar_enabled":"customizer","zakra_footer_bar_style":"customizer","zakra_sidebar_layout":"customizer","zakra_remove_content_margin":false,"zakra_sidebar":"customizer","zakra_transparent_header":"customizer","zakra_logo":0,"zakra_main_header_style":"default","zakra_menu_item_color":null,"zakra_menu_item_hover_color":null,"zakra_menu_item_active_color":null,"zakra_menu_active_style":"","zakra_page_header":true,"_tgsc_single_post_sidebar":"sidebar-right","_tgsc_single_post_disable_author_box":false,"_tgsc_blog_last_modified_date":{"enable":true},"footnotes":""},"categories":[1182],"tags":[],"class_list":["post-6741","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-beginners-guide"],"_links":{"self":[{"href":"https:\/\/zakratheme.com\/blog\/wp-json\/wp\/v2\/posts\/6741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zakratheme.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zakratheme.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zakratheme.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/zakratheme.com\/blog\/wp-json\/wp\/v2\/comments?post=6741"}],"version-history":[{"count":82,"href":"https:\/\/zakratheme.com\/blog\/wp-json\/wp\/v2\/posts\/6741\/revisions"}],"predecessor-version":[{"id":18832,"href":"https:\/\/zakratheme.com\/blog\/wp-json\/wp\/v2\/posts\/6741\/revisions\/18832"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zakratheme.com\/blog\/wp-json\/wp\/v2\/media\/9696"}],"wp:attachment":[{"href":"https:\/\/zakratheme.com\/blog\/wp-json\/wp\/v2\/media?parent=6741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zakratheme.com\/blog\/wp-json\/wp\/v2\/categories?post=6741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zakratheme.com\/blog\/wp-json\/wp\/v2\/tags?post=6741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}