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).
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.
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.
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.
Under Global settings, there are further other options as well. Now, choose the option Typography from the left sidebar menu.
Zakra theme customizer offers two different typography options: Base Typography and Headings (H1 – H6). Let’s discuss these two options below:
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.
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.
Among the four different options under the Menu option, navigate to Primary Menu: Menu Item.
You can see the Typography option to change the Font Family, Weight, Size, Line-Height, Style, and Transform.
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.
Change Post/Page Title and Sidebar Font
Select the Content option from the sidebar of the theme customizer page.
In order to change the font of the Page/Post title, choose the Page Header option.
Scroll all the way down, and you’ll find the Typography option. Change the font of the post/page title as per your preference.
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.
Now, click on the Sidebar option in order to change the font of the sidebar of your site.
Change the font of Sidebar Title and Sidebar Content individually.
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.
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.
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.
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.
Correspondingly, to change the font of posts, go to Posts >> All Posts from your WordPress dashboard. Then, follow the steps mentioned above.
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.
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.
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.
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.
