How to Change Font in WordPress (Works in All Themes)

If you’re confused about how to change your font in WordPress, I don’t blame you. It can be a bit confusing because the methods differ, depending on whether or not you’re using a newer block theme or an older classic theme. In this tutorial, I’ll walk you through changing fonts using a built-in option for the former and a free plugin option for the latter.
The post How to Change Font in WordPress (Works in All Themes) appeared first on Themeisle Blog.

If you’re confused about how to change your font in WordPress, I don’t blame you. It can be a bit confusing because the methods differ, depending on whether or not you’re using a newer block theme or an older classic theme. In this tutorial, I’ll walk you through changing fonts using a built-in option for the former and a free plugin option for the latter. (Spoiler alert: both methods are very beginner-friendly.)

Key Takeaways

Modern WordPress themes have a built-in font library feature that lets you access Google Fonts directly through WordPress.
Older classic themes don’t have these capabilities, but you can use a free plugin to unlock additional fonts.
Either method allows you to change fonts globally (across your whole site) and locally (within individual pages and posts).



Table of contents

How to change fonts in modern block themes

With the release of WordPress 6.5, it has become extremely quick and easy to not only change fonts, but also to access over a thousand extra fonts via the native Font Library feature. As long as you’re using a block theme, then the days of fiddling with plugins or wasting time browsing themes that have the font library you want are over.

🤔 How do I know if I’m using a block theme?

If you see this Edit site link in the top admin bar of your site, then you’re using a block theme:

Access the Full Site Editor (FSE)

To get started, from the WordPress dashboard, go to Appearance → Editor to open the Full Site Editor:

⚠️ If you do not see the Editor option under Appearance and instead you see Customize, it means that you are using a classic theme and not a block theme. You can either switch themes and install a block theme like Neve FSE pictured above, or skip ahead to the classic themes portion of this guide.

As soon as you click on Editor, it will take you right into the FSE interface, where you’ll want to choose Styles from the menu:

On the sub-menu that pops up, find the the little pencil icon and click it:

Find the Font Library and integrate Google Fonts

The previous step will bring you into the actual editor, with Styles (the split-circle icon) being chosen by default. From there, click on Typography:

This will show you a list of fonts that are available to you, but to connect to Google Fonts and unlock over 200 pages of font choices, you’ll need three more clicks:

First, click the icon to the right of the subheading titled FONTS. It looks like two stacked lines with dots embedded in them. This will open up the Font Library.
Next, tap the third option in the Font Library called Install Fonts.
Finally, click Allow access to Google Fonts.

And that’s it!

You’ll now see that you have access to so many fonts that it would take you a whole day just to scroll through them all. If you need some help narrowing your choices, check out our collection of the best Google Fonts options for some inspiration.

Once you find a font that you like, click on it. If the font has multiple variants, simply select the ones you like, and when you’re ready, tap Install on the bottom right:

Assuming everything goes well, you’ll receive a confirmation / success message:

Choose and edit your fonts globally

Now you’re ready to apply your font selection globally to the various kinds of text on your website.

Simply X out of the Font Library selection screen, which will bring you back to the more general FSE editing screen.

There you’ll see whichever fonts you installed reflected in the FONTS selection on the righthand side menu. In this particular instance, we chose Andada Pro, which is now visible.

You’ll also notice the Elements area, which houses the categories of your global text choices:

Text
Links
Headings
Captions
Buttons

For example’s sake, let’s say you wanted to apply your newly selected font as a Heading font across your entire website. To pull it off, you’d click on Headings under the Elements area.

Here you could apply it to all of your headings (i.e., H1 through H6) or only specific ones.

You’d then repeat this process for all of the font elements until you achieve a look you that you are satisfied with.

💡 For some great font pairing ideas, check out our post on how to choose your WordPress font.

Choose and edit your fonts locally

Okay, so now you know how to set up your global typography styles, ensuring that your site visitors will have a consistent experience and that your pages and posts will look professional. However, what if you have some special reason to override those settings for a particular article or page?

It’s actually really easy to do. Here’s how:

First, go into whichever page or post you’d like to add the custom font to. Then find the block of text that contains the text you’d wish to customize. You can either click on the block to select it, or highlight the text itself. After that, look over to the righthand side menu again, make sure that Block is selected, and click the three dots next to Typography. Then tap Font Family.

You’ll see that both Font and Size will be set to Default. Just click on Font and then choose the one you want from the drop down menu. Your highlighted text will instantly transform into your desired custom font, overriding the global settings you created earlier.

⚠️ Pro tip: Avoid going overboard with local font customization. If you tweak your fonts too much, it may come across as unprofessional and visitors will probably find it odd as well, thus decreasing the likelihood they’ll buy from you or come back to your site. In short, use it sparingly and for good reason.

How to change fonts in classic themes by using a plugin

Classic WordPress themes rely on the native WordPress Customizer for style and design customization, which means that you’ll usually find a theme’s font choices there. Depending on your chosen theme, you might have a generous selection of default font choices…or you might have barely have any.

Don’t worry, though. Regardless of which classic theme you’ve got, we’re going to show you how to access Google Fonts again so that you’ll have more than enough to choose from.

This time we’re going to use the popular free Fonts plugin to get the job done.

The Fonts plugin works with any classic WordPress theme and lets you choose from over 1,400 free fonts offered by Google. The one downside to it, when compared to the FSE method, is that unless you upgrade to the Pro version of the plugin, it won’t let you host the fonts locally. Hosting the fonts locally eliminates the extra network request to Google’s servers, which can speed up your page load times.

To show you how it works, we’ll use an older default WordPress theme called Twenty Twenty One. The reason we’re going back that far is because all of the other default WordPress themes after Twenty Twenty One let you use the FSE method we already described.

Install and activate the Fonts Plugin

To get started, install and activate the free Fonts plugin from WordPress.org. The process is the same as installing any other plugin:

Go to Plugins → Add New Plugin. Then in the search box, start typing in “fonts plugin” and you should see it auto-populate in the results relatively quickly. Next, click on Install Now, give it a few seconds, and once the Install Now button changes into Activate, click it again.

Select your global fonts in the Customizer

Next up, we’re going to head on over to the Customizer to set your global font settings. Normally this is done through the dashboard by going to Appearance → Customize, but in this case, you can jump ahead a step by using the sub-menu of the plugin itself.

Go to Fonts Plugin → Customize Fonts.

On the next screen, the two choices you want to keep your eyes on are Basic Settings and Advanced Settings. The easiest way to describe the difference between them is that Basic Settings – as the name implies – keeps things simple, while Advanced Settings lets you fine tune your font choices on a deeper level.

The most obvious example of this is the headings choices. In Basic Settings, the font choice for headings is universal – meaning that whatever font you choose is going to apply to H1, H2, H3, and so on. In contrast, under Advanced Settings, you can specify the font you want for each individual heading type:

Once you’ve made your selections, simply click on Publish and your changes will go live across your site:

Select custom local fonts within a page or post

With the method above, you learned how to change your font in a classic theme for your entire site. As we mentioned previously, this is referred to as “global font settings,” and just like we did with the FSE tutorial, we’re going to teach you how to also change your fonts locally.

This method has a lot more overlap with its FSE counterpart in the sense that both of them take place within the block editor.

To access the custom font choices from inside a page or post, either highlight the text you want to edit, or select the block which contains it. Then click on the most far left icon on the sub-menu. This will open up another menu, where you will select Google Fonts:

As soon as you click on Google Fonts, the righthand side sub-menu will change to show the Google Fonts options. Tap FONT and then scroll away to your heart’s content until you find the font you like:

Repeat this process for any blocks of text you wish to adjust – including headings. In fact, you can even change the block type between paragraph and heading right within that sub-menu.

Just click on BLOCK TYPE and make your swaps there. Remember what we said earlier though – try not to go overboard with this feature as it will do more harm than good if you overuse it.

There you have it!

At this point, you should feel comfortable changing fonts in any WordPress theme out there – whether block or classic.

In terms of complexity, this is arguably one of the easier aspects of WordPress site development.

This holds true for both classic themes and block themes. With that said, if you haven’t chosen a theme yet and font selection is important to you, then it’s probably more beneficial to choose a block theme. This is not only because it’s the direction that WordPress overall is heading in, but also because it lets you host the Google Fonts locally via the Font Library. To get that same benefit in classic themes, you’d have to pay for the Pro version of the Fonts plugin.

If you’re a fan of classic themes and want a nice middle-ground option, then you could always choose a theme like Neve, which comes with an extremely generous amount of free fonts. It’s not as many as Google Fonts, but it’s more than enough to satisfy most needs.

For some other ways to customize your theme and make it your own, check out our guide on how to turn any WordPress theme into a custom-branded site.

Still have any questions about how to change WordPress fonts? Ask us in the comments section!

Free guide

4 Essential Steps to Speed UpYour WordPress Website

Follow the simple steps in our 4-part mini seriesand reduce your loading times by 50-80%. 🚀

Free Access

Was this article helpful?
Yes

No

Thanks for your feedback!

You can check also:

Martin wrote his first e-book and built his first website using Weebly to market it and sell it in 2013. After making his first sale, he knew he was onto something. A few years later he made the switch to WordPress and from then on he became a full on WordPress addict. When he’s not WordPress-ing, you can find him doing pullups, handstands, drinking matcha, and of course, writing.

Reviewed By: Karol K




Table of contents

 


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *