How to Change Font in WordPress 2021? (Font Style, Size, Color on Any Theme)

How to Change Font in WordPress

Don’t know how to change font in WordPress? Don’t worry; we’ve got you covered. 

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. 

In this article, we’ve explained different ways on how to change font in WordPress. Hence, keep reading. 

Why Change Font in WordPress?

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 Search Engine Results Pages (SERPs)

SERP Page

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. 

With that said, we’ll guide you on how to change font in WordPress website. Also, you can change fonts on individual posts and pages. And, if you’ve some coding knowledge, WordPress also allows you to use codes to change the font as per your need. 

So, without further ado, let’s get started. 


Change Font Using Theme Customizer 

Did you know, the default theme customizer doesn’t 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. 

For this tutorial, we’ll use one of the most popular multipurpose WordPress themes – Zakra. As it’s a multipurpose theme, you can use it to create any niche website—sites such as Business, eCommerce, Blog, etc., to name a few. 

Zakra

Besides, it’s highly customizable. Also, it looks great on any digital device such as mobile, laptop, tablet, and more. You don’t have to worry about the theme slowing down your website. That’s because it’s optimized for speed as well as SEO optimized

With that in mind, let’s change the font using the theme customizer in the Zakra theme. Of course, first of all, you’ve to install and activate the theme. Also, Zakra offers 65+ ready-to-import demos for every niche article. So go ahead and import a suitable demo for your website. 

How to Change Global Font in Zakra?

Now, let’s change the font of your website using the theme customizer. From your WordPress dashboard, navigate to Appearance >> Customize. This takes you to the theme customizer page. 

Customization Navigation

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’ve imported on the right side. 

Select the Global option from the sidebar menu if you want the same typography and heading throughout the site. 

Global Settings

Under Global settings, there are further other options as well. Now, choose the option Typography from the left sidebar menu. 

Global Typography

Zakra theme customizer offers two different typography options: Base Typography and Headings (H1 – H6). Let’s discuss these two options below:

Options of Typography

Base Typography: 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 – Body and Heading

  • Body: In this option, you can change the Font Family, Weight, Size, and Line-Height. Additionally, you can choose the Style between Normal, Italic, Oblique, Initial, and Inherit. Likewise, Zakra provides an option to Transform the content to Capitalize, Uppercase, Lowercase, Initial, and Inherit. 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. 
  • Heading: Change the Font Family, Weight, Line-Height, Style, and Transform the headings of your site with the help of this option. 

Headings (H1 – H6): The Heading option on Base Typography is used to change the typography of all headings from H1 – H6 at the same time. If you want to separately change headings H1 – H6 then, this option comes in handy. 

Heading Typography

Click on the pencil icon next to each heading, and you can change the Font Family, Weight, Size, Line-Height, Style, Transform, etc. as shown in the image above.  


How to Individually Change Header and Content Font in Zakra? 

The above method is to change the typography globally. However, Zakra provides the option to change the typography of the Header, Footer, Sidebar, and Post/Page title individually. 

Change Header Font 

To change the typography of the menus located at the header, navigate to the Header menu from the sidebar of the theme customizer page. Next, select the Menu option. 

How to Change Font in WordPress Menu

Among the four different options under the Menu option, navigate to Primary Menu: Menu Item

Primary Menu

You can see the Typography option to change the Font Family, Weight, Size, Line-Height, Style, and Transform. 

Primary Menu Typography

To change the font of the dropdown menu, go back, and select the Primary Menu: Dropdown Item option. This option allows you to change the font of the dropdown menu. Similarly, you can change the Mobile Menu typography as well. 

Dropdown Menu and Mobile Menu

Change Post/Page Title and Sidebar Font

Select the Content option from the sidebar of the theme customizer page. 

Content Option

In order to change the font of the Page/Post title, choose the Page Header option.  

Page Header Typography

Scroll all the way down, and you’ll find the Typography option. Change the font of the post/page title as per your preference. 

Post and Page Title Typography

Correspondingly, if you wish to change the font of the blog title, click on the Blog/Archive. Next, please scroll down and change the Blog/Archive Post Title’s typography however it seems fit. 

Blog and Archive Typography

Now, click on the Sidebar option in order to change the font of the sidebar of your site. 

Sidebar Typography

Change the font of Sidebar Title and Sidebar Content individually. 

Sidebar Typography Options

Change Font in WordPress Using Block Editor (Gutenberg)

WordPress also allows you to change the font using Gutenberg block editor. For that, go back to your WordPress dashboard. Now, navigate to Pages >> All Pages

Page Navigation

Hover over to the page you want to change the font of and click on the Edit option. This takes you to the WordPress editor page. 

Edit Page

Now, select the Block option located at the top right. Then, click on any block of your choice to change the font. 

Below the Block option, the Typography option is visible. You can select the different Font Sizes between Small, Normal, Medium, Large, and Huge. Besides, a Custom font size option is also available. 

Gutenberg Typography

Moreover, you can also change the font color with the help of the option Color. Along with that, you can also change the Background Color of the selected block.  

Gutenberg Color

Correspondingly, to change the font of posts, go to Posts >> All Posts from your WordPress dashboard. Then, follow the steps mentioned above. 

Post Navigation

Once you’re satisfied with the changes, click on the Update and Publish button at the top right. 


Change Font in WordPress Using Classic Editor

If you desire to change the font style using a WordPress classic editor then, this section is for you. Go to Pages >> All Pages from your WordPress dashboard. Hover over to a page and hit the Edit button. 

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. After all the changes, don’t forget to hit the Update or Publish button. 


Change Font in WordPress Using Additional CSS

Having some coding knowledge can be useful for you. Zakra theme customizer offers the option to add additional CSS. You can find Additional CSS as the last option on the theme customizer page.  

Additional CSS

Other than that, you can make changes to the style.css file of the WordPress editor. To access the file, navigate to Appearance >> Theme Editor.

Theme Editor Navigation

But, only make changes to this file if you’re 100% sure about what you’re doing. Otherwise, you might end up messing up your theme. After the necessary changes hit the Update File button.

Theme Editor Page

Wrapping It Up!

And that’s how you can change font in Zakra theme using theme customizer. Furthermore, you can use the block editor and classic editor to change font in WordPress. 

However, the block and classic editor don’t provide many options and flexibility like the Zakra theme customizer. Nevertheless, it’s up to you which method you want to choose. Furthermore, you can also add additional CSS if you’ve any coding knowledge.

Finally, it’s 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’s an article on how to edit a header in WordPress that might interest you. 

Lastly, follow us on Twitter and Facebook for more future updates. 

Priyanka Panjiyar

An enthusiastic Technical Writer and a Blogger. She spends her free time painting, watching movies and series, and listening to music. You can also connect with her on Twitter @Priyanka9502 and LinkedIn @priyanka panjiyar

Scroll to top

Pin It on Pinterest