How to Change Fonts in WordPress (4 Easy Ways)

This post may contain affiliate links. If you make a purchase through these links, we may earn a commission at no additional cost to you.

Ever visited a website and thought, “Wow, this looks sharp”? Or maybe you’ve landed on a page that was a total headache to read? Chances are, the fonts had a lot to do with it. Typography – the fancy word for how text looks – is a bit like the outfit your website wears. It can make it look smart, professional, and easy to approach, or messy, confusing, and a bit of a dog’s dinner.

For anyone running a WordPress site in the UK, from a personal blog about the joys of British weather to a bustling online shop for handmade crafts, getting your fonts right is crucial. It’s not just about looking pretty. The right font makes your content a doddle to read, keeps visitors sticking around, and gives your whole brand a touch of class. It helps people trust you.

But if you’re not a tech whizz, the idea of fiddling with fonts in WordPress can feel like trying to solve a Rubik’s Cube in the dark. You might worry you’ll break something or get lost in a jungle of confusing menus.

Well, worry no more. This is your ultimate guide to changing fonts in WordPress. We’ll walk you through everything, step-by-step, from the dead simple methods that take just a few clicks to the more advanced tricks that give you total control. We’ll cover everything you need to know, whether you’re a complete beginner or you’re ready to get your hands dirty with a bit of code. Think of this as your friendly local expert, here to help you give your website the typographic makeover it deserves.

Part 1: Why Bother with Fonts Anyway? The Quick Lowdown

Before we dive into the “how,” let’s quickly chat about the “why.” Why should you spend even five minutes thinking about the fonts on your website? It turns out, it’s more important than you might think.

It’s All About Readability

First and foremost, your website needs to be easy to read. If your text is too small, too cramped, or written in a swirly, hard-to-decipher script, your visitors will give up and go elsewhere. It’s like trying to read a menu in a dimly lit restaurant – frustrating!

A good font is clear and legible on all devices, from a massive desktop screen in your home office to the small smartphone you’re scrolling on while queuing for a coffee. This is especially important for longer articles or blog posts. You want people to settle in with a cuppa and enjoy your content, not squint and struggle.

Building Your Brand’s Personality

Fonts have personality. Think about it. The bold, no-nonsense font used by a national newspaper feels very different from the elegant, flowing script on a wedding invitation. The font you choose says a lot about your brand without you having to write a single word.

Serif fonts (the ones with the little “feet” at the ends of the letters, like Times New Roman) often feel traditional, reliable, and respectable. They’re a great choice for businesses that want to convey authority and trustworthiness, like a law firm or a financial advisor.
Sans-serif fonts (without the little feet, like Arial or Helvetica) tend to feel modern, clean, and straightforward. They’re hugely popular online because they’re so clear and easy to read on screens. They’re perfect for tech companies, startups, and blogs that want a fresh, contemporary look.
Script fonts look like handwriting and can add a touch of elegance, creativity, or fun. A luxury brand might use a graceful script, while a food blogger might choose a more playful, handwritten style.
Display fonts are the big, bold, attention-grabbing ones often used for headlines. They’re designed to make a statement but should be used sparingly – a little goes a long way.

Choosing a font that matches your brand’s vibe helps create a consistent and memorable experience for your visitors. It’s a key part of your visual identity, just like your logo and colour scheme.

Keeping Visitors Engaged

A well-chosen font doesn’t just look good; it can actually keep people on your site for longer. When text is pleasant to read, visitors are more likely to stay and explore what you have to offer. This is what’s known as “user experience,” or UX for short. Good UX means your site is a pleasure to use, and good typography is a massive part of that.

When Google sees that people are spending more time on your site, it takes that as a sign that you’re providing high-quality, valuable content. This can give your search engine rankings a nice little boost, helping more people find you in the first place. So, a simple font change could actually lead to more traffic. Not bad, eh?

Part 2: The Building Blocks – What You Need to Know Before You Start

Okay, you’re convinced. Fonts are important. But before you start clicking buttons, let’s get a handle on a few key concepts. Understanding these basics will make the whole process much smoother.

Web Safe Fonts vs. Web Fonts

Back in the early days of the internet, designers had a very limited choice of fonts. They could only use “web safe” fonts – a small collection of fonts like Arial, Times New Roman, and Georgia that were pre-installed on almost every computer. If you used one of these, you could be pretty sure that everyone would see your website as you intended.

The problem? It was a bit boring. Everyone’s websites started to look the same.

Then came web fonts. These are fonts that aren’t installed on a user’s computer. Instead, they’re stored online and your website downloads them when a visitor arrives. This opened up a whole new world of creative possibilities. Suddenly, you could use thousands of beautiful, unique fonts to make your site stand out.

The most popular service for web fonts is Google Fonts, which offers a massive library of over 1,500 high-quality fonts, all completely free to use. Most modern methods for changing fonts in WordPress tap into this incredible resource.

The Anatomy of Typography: Headings, Body, and More

When we talk about changing fonts, we’re not usually talking about changing just one thing. A typical webpage is made up of different text elements, and you can control the font for each of them:

Body Text: This is the main content of your pages and posts – the paragraphs you’re reading right now. This needs to be super legible, so a clean, simple sans-serif or a classic serif is usually the best bet.
Headings (H1, H2, H3, etc.): These are the titles and subtitles that break up your content and create a clear structure. Your main page title is usually an H1, with sub-topics marked by H2s, H3s, and so on. You can often use a more creative or bold font for headings to grab attention.
Site Title and Tagline: This is the name of your website and the short description that often appears next to it in the header.
Navigation Menus: The links that help people find their way around your site.
Buttons: The clickable bits that say things like “Buy Now” or “Learn More.”

Good design often involves pairing two different fonts: one for the headings and another for the body text. This is called font pairing, and it creates a nice visual contrast that helps guide the reader’s eye through the page. A common and effective strategy is to pair a bold, interesting heading font with a simple, readable body font.

Self-Hosted vs. Cloud-Hosted Fonts

This sounds technical, but the idea is simple.

Cloud-Hosted Fonts (e.g., Google Fonts): As we mentioned, these fonts live on someone else’s server (like Google’s). Your website just links to them. This is the easiest and most common approach. It’s fast, reliable, and you don’t have to worry about storing the font files yourself.
Self-Hosted Fonts: Sometimes, you might buy a premium font from a designer or want to use a custom font for your brand. In this case, you would upload the font files directly to your WordPress server. This gives you more control and means you’re not relying on an external service. However, it’s a more advanced technique and requires a bit more technical know-how. We’ll cover this later.

For most people, sticking with Google Fonts is the perfect solution. It’s free, easy, and offers more choice than you’ll ever need.

Part 3: The “How-To” – Four Ways to Change Your Fonts in WordPress

Right, let’s get down to business. There are several ways to change the fonts on your WordPress site, each with its own pros and cons. We’ll start with the simplest method and work our way up to the more powerful ones.

Method 1: Using the WordPress Theme Customizer (The Easy-Peasy Method)

This is the best place to start. Many modern WordPress themes, especially popular ones like Astra, Kadence, and Blocksy, come with built-in font options that you can access directly through the WordPress Customizer. It’s designed to be user-friendly and lets you see your changes in real-time.

Who is this for? Complete beginners and anyone who wants a quick and simple way to update their fonts without touching any code or installing extra plugins.

Here’s how you do it:

Log in to your WordPress dashboard. This is your website’s control panel, usually found at yourwebsite.co.uk/wp-admin.
Navigate to the Customizer. On the left-hand menu, hover over Appearance and then click on Customize. This will open up a new interface with a live preview of your website on the right and a set of customization options on the left.
Look for Typography Settings. The exact location will depend on your theme, but you’re looking for a menu item called something like “Typography,” “Fonts,” “Global Styles,” or “General Settings.” Have a little poke around. For example, in the popular Astra theme, you’ll find it under Global > Typography.
Explore the Font Options. Inside the typography section, you should see options to control the fonts for different elements of your site, like Body Font and Headings.
Choose Your Fonts. Click on the element you want to change. You’ll likely see a dropdown menu with a list of fonts. Many themes integrate directly with Google Fonts, giving you hundreds of options. You can usually search for a specific font by name.
Adjust Font Size and Weight. As well as choosing the font family, you can also tweak the font size (how big the text is), font weight (how bold it is – e.g., regular, semi-bold, bold), and sometimes things like line height (the space between lines of text) and letter spacing.
Preview and Publish. As you make changes, you’ll see them reflected instantly in the live preview on the right. Play around until you’re happy with how everything looks.
Hit the “Publish” button. Once you’re satisfied, click the blue Publish button at the top of the menu. This will save your changes and make them live on your website. That’s it!

Pros:

Super easy and beginner-friendly.
No code or plugins required.
You see your changes live, so there’s no guesswork.

Cons:

You’re limited to the options your theme provides. If your theme doesn’t have good typography settings, you’re out of luck with this method.
Some themes only offer a small selection of fonts.

Method 2: Using the Site Editor (For Block Themes)

WordPress is constantly evolving. The latest evolution is the Block Editor (also known as Gutenberg) and Block Themes. If you’re using a newer theme like Twenty Twenty-Four, the way you customize things is a bit different. Instead of the old Customizer, you’ll use the Site Editor.

Who is this for? Users of modern Block Themes who want site-wide font control.

Here’s how you do it:

Log in to your WordPress dashboard.
Open the Site Editor. In the left-hand menu, go to Appearance > Editor. This will launch the full-site editing experience.
Access the Global Styles. On the right side of the screen, you’ll see a panel. Click on the Styles icon (it looks like a circle that’s half-filled in). This opens the Global Styles panel, which lets you control the look of your entire site.
Select Typography. In the Styles panel, click on Typography.
Edit Your Elements. You’ll see a list of different text elements, such as Text, Links, Headings, and Buttons. Click on the element you want to change.
Choose and Customise Your Font. A panel will appear with font controls. You can select a Font Family from a dropdown list. You can also adjust the Size, Appearance (which is the font weight), and Line Height. The Site Editor pulls fonts from Google Fonts by default, but your theme might also add its own.
Save Your Changes. Once you’re happy, click the Save button in the top right corner. WordPress will ask you to confirm which parts of the site you want to save the changes to. Just click Save again.

The Site Editor is incredibly powerful because it gives you consistent control over your entire website from one place.

Pros:

The modern, standard way to edit Block Themes.
Gives you site-wide control for a consistent look.
Visual, real-time editing.

Cons:

Only works with Block Themes. If you’re using an older “Classic” theme, this option won’t be available.
Can feel a little less intuitive than the old Customizer at first.

Method 3: Using a WordPress Plugin (The Power and Flexibility Method)

What if your theme doesn’t have the font options you want, or you want more control? This is where plugins come to the rescue. A good typography plugin can supercharge your font capabilities, giving you access to a huge library of fonts and granular control over every text element on your site.

Who is this for? Anyone whose theme has limited font options, or those who want more advanced control without writing code.

There are several great plugins out there, but one of the most popular and user-friendly is Google Fonts for WordPress. Another powerful option is Custom Fonts. Let’s walk through how to use the Google Fonts for WordPress plugin.

Step-by-Step Guide (using Google Fonts for WordPress):

Install the Plugin. From your WordPress dashboard, go to Plugins > Add New. In the search bar, type “Google Fonts for WordPress”. The one by the Fonts Plugin team is a solid choice. Click Install Now and then Activate.
Access the Plugin’s Settings. After activating, you’ll find the plugin’s settings under Appearance > Fonts Plugin.
Configure the Basics. The plugin will guide you through a quick setup. You can choose a default font pairing for your body text and headings as a starting point.
Edit Specific Elements. In the “Advanced Settings” or “Edit Fonts” section of the plugin, you’ll be able to target specific parts of your website. You can select an element (like “Site Title” or “H2 Headings”) and then assign a font family, weight, style, and size to it. This gives you much more detailed control than the basic theme customizer.
Load Your Fonts. The plugin allows you to select which Google Fonts you want to use on your site. It’s a good idea to only load the fonts you’re actually using to keep your site running fast.
Save and Check. Save your changes in the plugin’s interface. Then, open your website in a new tab to see how it looks.

Pros:

Works with almost any theme.
Gives you access to the entire Google Fonts library.
Offers much more granular control over individual elements.
Many plugins also let you upload your own custom fonts (self-hosting).

Cons:

Adding more plugins can sometimes slow your site down, although modern plugins are very well-optimised.
It’s another thing to keep updated.

Method 4: Using Custom CSS (The “You’re in Total Control” Method)

If you’re comfortable with a little bit of code and want ultimate precision, you can add fonts using CSS (Cascading Style Sheets). This is the code that browsers use to style a webpage. It might sound scary, but it’s more straightforward than you think.

This method involves two steps:

Telling WordPress to load the font you want from Google Fonts.
Writing a small snippet of CSS to tell specific elements on your site to use that font.

Who is this for? Users who are comfortable with basic code, or those who want to apply a font to a very specific element that other methods can’t target.

Step 1: Get the Font Code from Google Fonts

Go to the Google Fonts website.
Browse or search for the font you want to use. Let’s say you pick a font called “Roboto.”
Click on the font to see its page. On the right, you’ll see a “Get font” button. Click it.
You can select the different weights you need (e.g., Regular 400, Bold 700). Try not to select too many, as each one adds to your page load time.
Click the “Get embed code” button. Google will give you a piece of code that looks something like this:<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">You’ll also see the CSS rules to apply the font, which will look like: font-family: "Roboto", sans-serif;

Step 2: Add the Code to WordPress

Now you need to add this code to your site. The best way to add the <link> code is by using a simple plugin like WPCode – Insert Headers and Footers. This lets you add code to your site’s header without touching your theme’s files directly (which is a bad idea, as your changes will be lost when the theme updates).

Install and activate the WPCode plugin.
Go to Code Snippets > Header & Footer.
Paste the <link> code from Google Fonts into the “Header” box.
Save your changes.

Step 3: Apply the Font with CSS

Now that the font is being loaded on your site, you need to tell your site where to use it.

Go back to the WordPress Customizer (Appearance > Customize).
Look for a section at the bottom called “Additional CSS.”
Here, you can write your CSS rules. For example, if you want to change all your paragraph text to Roboto, you would add:body { font-family: "Roboto", sans-serif; }If you wanted to change just your main headings (H1s and H2s), you would add:h1, h2 { font-family: "Roboto", sans-serif; font-weight: 700; /* This makes it bold */ }
Click “Publish.”

You can use this method to target any element on your page. To find out what an element is called in CSS, you can use your browser’s “Inspect” tool (usually by right-clicking on the element).

Pros:

Ultimate control and flexibility.
You can target any element with precision.
It’s lightweight and doesn’t require a big plugin.

Cons:

Requires a basic understanding of CSS.
It’s easier to make mistakes if you’re not careful.
You don’t get a live preview in a dropdown menu; you have to write the code yourself.

Part 4: A Few Pro Tips and Common Pitfalls to Avoid

You’re now armed with four different ways to change your fonts. Before you dive in, here are a few extra tips to make sure you get it right.

Tip 1: Less Is More

It can be tempting to go wild and use five different fonts just because you can. Don’t do it. The best practice is to stick to a maximum of two, or maybe three, fonts for your entire website. A good rule of thumb is:

One font for headings.
One font for body text.
Maybe a third for special accents, like a “call to action” button, but use it sparingly.

Using too many fonts makes your site look cluttered and unprofessional.

Tip 2: Prioritise Performance

Every custom font you add has to be downloaded by your visitor’s browser. The more fonts and font weights you add, the slower your site will be. A slow website is bad for user experience and bad for your SEO.

When you’re choosing fonts from Google Fonts, only select the weights you actually need. If you’re only going to use the regular and bold versions of a font, don’t select the thin, light, medium, and black versions as well. Be ruthless!

Tip 3: Think About Accessibility

Make sure there is enough contrast between your text colour and your background colour. Grey text on a slightly-less-grey background might look cool and minimalist, but it can be impossible to read for people with visual impairments. Use a tool like the WebAIM Contrast Checker to make sure your colour combinations pass accessibility standards.

Also, avoid using tiny font sizes for your body text. A good starting point is 16px, but 18px is often even better for readability.

Tip 4: Self-Hosting Your Own Fonts

What if you have a custom font file (in a format like .woff2, .woff, or .ttf) that you want to use? This is called self-hosting.

While you can do this with code, the easiest way by far is to use a plugin. The Custom Fonts plugin is fantastic for this. You just install it, go to its settings page, give your font a name, and upload the different font files (.woff2 is the most modern and best for performance).

Once uploaded, the font will appear in the WordPress Customizer’s typography options, just like any other font. It’s a brilliant way to get the benefits of custom fonts without the headache of writing code.

Common Pitfall: Editing Theme Files Directly

You might read an old tutorial online that tells you to edit your theme’s style.css or functions.php file. This is almost always a bad idea. Why? Because when your theme gets an update, all your changes will be completely wiped out.

Always use one of the methods we’ve described above: the Customizer, the Site Editor, a plugin, or the “Additional CSS” section of the Customizer. These methods ensure your changes are safe from theme updates.

Wrapping It All Up

Changing the fonts on your WordPress website is one of the most powerful ways to improve its design, readability, and overall brand personality. What might seem like a small tweak can have a huge impact on how your visitors feel about your site.

We’ve covered a lot of ground, but it all boils down to finding the right method for you:

For a quick and easy change, start with your Theme Customizer or the Site Editor. It might be all you need.
If you need more options, a plugin like Google Fonts for WordPress will give you huge flexibility without needing any code.
For ultimate control, dipping your toes into the “Additional CSS” section gives you the power to style anything exactly how you want it.

Don’t be afraid to experiment. Try out different font pairings. See what feels right for your brand. Most importantly, always put readability first. Your visitors will thank you for it, and your website will look all the more professional and trustworthy as a result. Now, go on and give your site the stylish typography it deserves!

The Guide to Changing Fonts in WordPress: From Beginner Clicks to Pro-Level Code