20 June 2023
Are you looking to change the WordPress fonts to something different?
Your website text font plays a major role in your site design and brand identity. It can improve the overall readability of your content and make your website look modern and professional.
In this article, we’ll show you how to change WordPress fonts using different ways, so you can easily change fonts in WordPress.
There are many reasons why you might want to change the fonts on your WordPress website. Here are a few:
Before we get started with WordPress fonts, let’s go through the four main font types:
Fortunately, you are not limited to using WordPress’ default font. In fact, there are several ways to change a font in WordPress, and most of them don’t need any coding knowledge. Let’s get started!
Using the WordPress theme customizer is an easy way to change the font on your website. It allows you to customize the design of your website and displays a real-time preview.
Note: If you don’t see a customizer menu option, your theme most likely has full site editing enabled, and you’ll need to use a different method or switch themes.
For this article, we’ll use the Astra theme. However, the options will be different based on the WordPress theme you use. Depending on your theme, you should look for font or typography options in the customizer.
To start, go to Appearance » Customize from your WordPress dashboard.
This will open the WordPress theme customizer.
The Astra theme offers a Global section with options for changing site-wide styles. To change the font for your whole website, use the Global option from the menu on the left.
On the next screen, you’ll see options for font, colors, containers, buttons, etc.
Go ahead and select Typography.
Next, you can choose different fonts under the Presets section.
These are the theme’s default fonts, and choosing one will change the font on your whole website.
In addition, you can also change fonts for individual elements on your theme.
For example, you can choose a different font for the body and headings. There are even options for using different fonts at each heading level.
To start, just select a font from the Font Family dropdown option for a specific element.
In addition, there are more options for changing the font’s weight, size, variation, and other features.
Once you are done with your font settings, click on the Publish button on the top to save your changes.
That’s it! Visit your website and see the new font.
If you’re using a block-based WordPress theme, such as Twenty Twenty-Two, you may change the font of your site through the full site editor.
The full site editor lets you customize your WordPress theme with blocks, much like when changing posts or pages in the WordPress content editor.
For this article, we’ll use the Twenty Twenty-Two theme.
To get started, go to Appearance » Editor in the WordPress admin panel.
This will launch the full site editor for your WordPress theme.
Then, in the top-right corner, select the Styles icon and then the Typography option.
After that, you can change the typography of elements like text and links.
We’ll select text as the element and then change its font using the Font Family dropdown option.
Once done, click the Save button.
You have successfully changed the font by using the full site editor.
Using a WordPress font plugin is another way to change the fonts in WordPress.
There are several plugins available that improve your site’s typography options. When choosing a WordPress font plugin, we recommend opting for one that allows you to use Google Fonts.
For this article, we’ll use Easy Google Fonts.
It’s a free WordPress plugin that allows you to add 600+ Google fonts and different font variants to your website.
To start, first, you’ll need to install and activate the Easy Google Fonts plugin. For more, check out how to install a WordPress plugin.
Upon activation, go to Appearance » Customize from your WordPress dashboard.
This will open the WordPress theme customizer.
Now, click on the Typography option.
On the next screen, click on the Default Typography option.
You may now change the font of any element on your website, from paragraphs to header tags. Customize them as needed, then save those changes.
There are many WordPress page builders available that let you create a custom page without editing code. You may use them to change the font of various elements on your website.
For this tutorial, we’ll use Elementor. It’s one of the best page builder plugins for WordPress. It offers a drag-and-drop builder to create custom pages without touching a single line of code.
For more, check out our complete Elementor review.
To get started, open any page using the Elementor editor.
Once open, click on the three lines in the top left-hand corner of your editor.
Now, click on Site Settings.
On the next screen, you’ll be able to customize the global colors, global fonts, typography, buttons, and a whole lot more.
You can change the font for your primary and secondary headers, as well as the text and accent. Once you are happy with your settings, click on Update to save changes.
That’s how simple it is to change fonts with a page builder!
You can also change how your fonts appear on specific posts and pages by using the Gutenberg block editor.
The main drawback of this approach is that it will only apply the new font to that specific post or page. You’d have to repeat this process for any other post if you want to apply similar customization.
This can be useful for post-specific adjustments, but if you’re looking for a sitewide font change option, you should check the other options instead.
With that said, to change the font using the WordPress block editor, open the page or post you want to edit. Once you’re in the WordPress editor, select the text to change its appearance.
Next, click on the Settings panel in your top right corner and go to the Typography section. Now click on the three dots next to Typography and select Appearance from the options.
Once you do that, the Appearance options will be displayed under the Typography section.
Now, click the Appearance menu and choose a style for your font.
There are also options to change the font size, change text color, enable drop caps, and more.
Once done with your settings, click on Update to save your changes.
Another way to change the font in WordPress is by using CSS. It’s useful when your theme’s customization options don’t allow you to change fonts.
However, if you switch WordPress themes, your changes will be lost. So, before installing a new theme, copy your CSS code.
You can simply add CSS using the WordPress Customizer without having to access your website’s stylesheets.
Simply go to Appearance » Customize » Additional CSS and place your CSS code.
For example, if you want to customize the H1 tag and paragraph.
The CSS code will be as follows:
h1{
font-family: sans-serif;
font-size: 28px;
color: #FF0000;
}
p {
font-size: 18px;
color: #FFFFFF;
}
This will change the H1 tag across your site to sans-serif with a font size of 28.
Similarly, change the font of the paragraph to a size 18, with white color (#FFFFFF).
Fonts play an important part in the design of your website and should be selected carefully. The right font combination can be as appealing to the eye and trigger the right emotions as the right colors and images.
The good news is that WordPress makes it simple to change the font and customize it to meet the needs of your website. From using the WordPress customizer to installing plugins and using the page builder, we have covered several ways that you can use to change fonts in WordPress.
That’s it! We hope this article helped you learn how to change fonts in WordPress.
For more, check out these other helpful resources:
Lastly, if you like this article, please follow us on Facebook and Twitter.