How to Change WordPress Fonts (Easy Guide)

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.

Choosing a font for your website is a bit like picking an outfit for a big event. The right one makes you look sharp, professional, and trustworthy. The wrong one? Well, it can look a bit messy and put people off before you’ve even said a word. In the online world, your website’s ‘outfit’ is its typography, and getting it right is a secret weapon for success.

A good font doesn’t just make your words look nice; it makes them easy to read. It guides your visitor’s eye, helps them understand what’s important, and builds a sense of personality for your brand. A sleek, modern font might be perfect for a tech startup, while a classic, elegant one could be just the ticket for a fancy bakery.

This matters hugely for something called E-E-A-T (Experience, Expertise, Authoritativeness, and Trustworthiness). Think of it as your website’s reputation. A clean, professional font instantly makes your site feel more authoritative and trustworthy. It shows you care about the details and respect your reader’s time.

But if you’re new to WordPress, figuring out how to change fonts can feel a bit daunting. Where do you even start? Don’t worry. This guide will walk you through everything, step-by-step. We’ll cover all the methods, from the dead simple clicks in the editor to the slightly more advanced (but very powerful) techniques for adding any font you can imagine. Whether you’re a complete beginner or looking to level up your skills, you’ll find everything you need right here. Let’s get started.

Before We Begin: A Quick Chat About Fonts

Before we dive into the ‘how’, let’s quickly cover the ‘what’. Understanding a few basic ideas about fonts will make the whole process much easier and help you make better choices for your site.

What’s in a Font? Serif vs. Sans-Serif and More

You’ve probably heard these terms before, but what do they actually mean? It’s pretty simple.

Serif Fonts: Think of these as fonts with ‘little feet’. They have small decorative strokes at the ends of the letters. Times New Roman and Georgia are classic examples. Serif fonts often feel traditional, formal, and elegant. They are very popular in books and newspapers because those little feet can make long blocks of text easier to read.
Sans-Serif Fonts: ‘Sans’ is just French for ‘without’. So, these are fonts without the little feet. Arial and Helvetica are famous examples. They look clean, modern, and straightforward. Sans-serif fonts are incredibly popular on the web for their clarity on screens.
Script Fonts: These look like handwriting or calligraphy. They can be beautiful and personal but use them carefully. They’re often best for logos or very short, fancy headings, as they can be hard to read in long sentences.
Display Fonts: These are the big, bold, and often quirky fonts designed to grab attention. You’d use them for major headlines or posters. They’re full of personality but are definitely not for writing your main articles in.

For most websites, a great starting point is to pair a sans-serif font for your main body text (for readability) with either a serif or a display font for your headings (for personality).

Web Safe Fonts vs. The World of Web Fonts

This is another key idea to grasp.

Web Safe Fonts: In the early days of the internet, designers could only use a small handful of fonts that were pre-installed on almost every computer. These are the ‘web safe’ fonts like Arial, Verdana, and Georgia. They’re super reliable because you know everyone can see them, but they are a bit limited and, let’s be honest, a little boring.

Web Fonts: This is where things get exciting. A web font is one that isn’t installed on your visitor’s computer. Instead, their browser downloads it from a server, just like it downloads images. This means you can use thousands of beautiful, unique fonts on your site. The most popular service for this is Google Fonts, which is completely free and has a massive library. Another is Adobe Fonts, which is part of the Adobe Creative Cloud subscription.

For a modern website, you’ll almost certainly be using web fonts. They give you the creative freedom to make your site look truly unique. The methods we’ll cover below are all about how to get these brilliant web fonts working on your WordPress site.

Method 1: The Simplest Start – Using the WordPress Editor

In recent years, WordPress has made it much easier to control your site’s look and feel without ever touching a line of code. The modern Block Editor (often called ‘Gutenberg’) and the newer Site Editor give you font controls right at your fingertips.

For Block Themes: The Site Editor is Your Best Mate

If you’re using a modern ‘Block Theme’ (like the default Twenty Twenty-Four theme), you have access to a powerful tool called the Site Editor. This lets you change the design of your entire website, including the default fonts for everything.

Here’s how to use it:

Go to the Site Editor: In your WordPress dashboard, navigate to Appearance → Editor. This will open up a visual editor for your whole site.
Open the Styles Panel: Look for a circle icon that’s half-black and half-white in the top right corner. It might say ‘Styles’ when you hover over it. Click this to open the global Styles panel.
Select ‘Typography’: In the panel that appears on the right, you’ll see a list of elements you can style. Click on Typography.
Change Fonts for Key Elements: You’ll now see options for different parts of your site, like Text, Headings, Links, and Buttons. Click on any of these to manage their fonts.
Choose Your Font: When you click on an element, you’ll see a ‘Font’ dropdown. This will show you the fonts your theme already includes. Simply select a new one from the list to see a live preview of the change across your entire site. You can also adjust the size, line height, and weight (how bold it is).

Adding New Fonts with the Font Library

What if you want a font that isn’t already in your theme? The newer versions of WordPress have a brilliant feature called the Font Library.

From that same Typography panel in the Site Editor, you can often find a ‘Manage Fonts’ button. This opens the Font Library. From here, you can:

Install Google Fonts Directly: There’s a tab to connect to Google Fonts. You can browse their entire collection, select the ones you want, and install them with a single click. WordPress will handle all the technical bits in the background.
Upload Your Own Font Files: If you have font files on your computer (in formats like .ttf, .otf, .woff, or .woff2), you can simply drag and drop them here to upload them to your site.

Once a font is in your Font Library, it will be available in the ‘Font’ dropdown for you to use anywhere on your site. It’s a wonderfully simple and powerful system.

For Any Theme: Changing Fonts in Individual Blocks

Even if you’re not using a Block Theme, you can still change the typography for individual pieces of content right inside the page or post editor.

Select a Block: Click on any text-based block, like a Paragraph, Heading, or List.
Open the Block Settings: Make sure the settings sidebar is open on the right. If it isn’t, click the cog icon in the top right corner.
Find the Typography Controls: In the Block settings, you should see a Typography section. You might need to click three little dots to reveal more options.
Adjust Your Font: Here, you can easily change the Size of the text using preset options (like S, M, L) or by typing in a specific number. You can also change the Appearance (like making it bold, extra-light, etc.) and the Letter Case (e.g., all uppercase).

This method is perfect for when you want to make a specific heading stand out or emphasise a particular paragraph, without changing the font for the whole site.

Method 2: Check Your Theme’s Wardrobe – The WordPress Customiser

For many years, the WordPress Customiser was the main place to make design changes. Many ‘classic’ themes still rely on it heavily for font controls. It’s a very user-friendly tool because it shows you a live preview of your changes as you make them.

What is the Customiser?

The Customiser is a special interface that loads your website on the left and a set of controls on the right. Any change you make in the controls is instantly shown in the preview.

You can find it by going to Appearance → Customise in your WordPress dashboard.

Finding the Font Settings

The exact location of the font settings depends entirely on your theme’s developer. However, they are usually in a logical place.

Open the Customiser: Go to Appearance → Customise.
Look for ‘Typography’ or ‘Fonts’: Scan the options on the left. You’re looking for a menu item that says something like Typography, Global Fonts, General Settings, or Styling. Popular themes like Astra, Kadence, or GeneratePress have very clear and powerful Typography sections.
Explore the Options: Once you click into the Typography section, you’ll likely see separate controls for different parts of your site:
- Body Typography: This controls the main paragraph text across your entire site.
- Headings (H1, H2, H3, etc.): You can often set a different font for each level of heading.
- Menu/Navigation: Style the text in your main menu.
- Buttons: Customise the font used on all your buttons.
Select Your Fonts and Styles: For each element, you’ll typically get a dropdown menu to choose a font family, along with sliders or boxes to set the font weight, size, and line height.

The beauty of the Customiser is that you can play around with different combinations and see exactly how they look before committing. Once you’re happy with your new style, just hit the Publish button at the top, and your changes will be live.

Method 3: The Plugin Power-Up – Easy Fonts for Everyone

If you find that your theme’s built-in options are too limited, or you don’t have a modern Block Theme, a plugin is your best friend. Plugins are like apps for your website; they add new features and functionality. There are some excellent plugins specifically designed to make managing fonts a breeze.

Why Use a Plugin?

Huge Font Selection: They give you easy access to the entire Google Fonts library (over 1,500 fonts) right inside your dashboard.
More Control: They often provide more granular control than themes do, letting you assign fonts to very specific elements.
No Code Needed: It’s a 100% code-free way to get professional typography on your site.

Our Top Pick: Fonts Plugin | Google Fonts Typography

This is a fantastic and very popular plugin that integrates seamlessly with the WordPress Customiser, making it feel like a built-in feature.

Here’s how to set it up and use it:

Install and Activate: From your WordPress dashboard, go to Plugins → Add New. Search for “Google Fonts Typography”. Find the right one (it’s by the “Fonts Plugin” authors) and click Install Now, then Activate.
Go to the Customiser: Now, head back to Appearance → Customise.
Find the New Settings: You will see a new menu item called Fonts Plugin. This is where all the magic happens.
Configure Your Fonts:
- Basic Settings: This is where you can set the default font for your body text and all your headings (H1 through H6).
- Advanced Settings: This section allows you to target almost any element on your website, like the site title, navigation menu, or sidebar widgets.
- Font Loading: You can fine-tune how the fonts are loaded to keep your site running fast.
Choose and Preview: When you click to change a font, you’ll get a clean interface to browse and search the entire Google Fonts library. As you select a font, the preview on the right will update instantly. You can also adjust the weight, style, and colour.

Once you’re happy, click Publish. The plugin will automatically add all the necessary code to your site to load and display your chosen fonts.

Another Great Option: Easy Google Fonts

This is another long-standing and reliable plugin. It works in a very similar way to the one above, adding a ‘Typography’ section to the Customiser. After installing and activating it, you can go to the Customiser, find its settings, and create ‘font controls’ for different CSS selectors (like h1 or .entry-title). It’s slightly more technical as you need to know the name of the element you want to change, but it’s very powerful.

Method 4: The Adventurous Route – Adding Custom Fonts Manually

This method is for those who want ultimate control, need to use a font that isn’t on Google Fonts, or simply enjoy getting their hands a little dirty with code. It involves uploading your own font files and adding a snippet of CSS to your site. It sounds tricky, but if you follow the steps carefully, it’s perfectly achievable.

A Word of Warning: Use a Child Theme!

Before you add any custom code, it’s crucial to use a child theme. Imagine your main theme is a pristine, rented flat. You wouldn’t paint directly on the walls, would you? You’d put up your own wallpaper. A child theme is like that wallpaper. It inherits all the style and functionality of its ‘parent’ theme but lets you make your own customisations in a separate, safe place.

If you add code directly to your main theme’s files and the theme gets an update, all your changes will be completely erased. A child theme protects your custom code from being overwritten. Many themes offer a pre-made child theme you can download, or you can use a plugin to create one.

Step 1: Get Your Font Files

First, you need the font itself. You can download fonts from many places online. Font Squirrel is a brilliant resource for free, commercially-licensed fonts.

When you download a font, you’ll likely get it in a few different formats. For the modern web, you only really need to worry about two:

.woff2: This is the most modern, highly compressed format. It’s supported by all current browsers and is the best one to use.
.woff: This is a slightly older format that works as a fallback for browsers that don’t support woff2.

Step 2: Upload the Fonts to Your Website

You need to put your .woff2 and .woff files somewhere on your server so your website can find them. The easiest way is to use an FTP (File Transfer Protocol) client or your hosting provider’s File Manager.

Navigate to your theme’s folder, which is usually at wp-content/themes/your-child-theme-name/.
Create a new folder inside it and call it fonts.
Upload your font files into this new fonts folder.

Step 3: Tell Your Website About the New Font with CSS

Now you need to write a little bit of CSS code to ‘introduce’ the new font to your website. This is done using a rule called @font-face. Think of it as giving your site the directions to where the font files are located.

Go to Appearance → Customise.
Click on the Additional CSS tab at the bottom. This is a safe place to add custom CSS snippets.
Paste in the following code, making sure to replace the placeholders with your own details:

@font-face {
  font-family: 'Your New Font Name'; /* Give your font a name */
  src: url('/wp-content/themes/your-child-theme-name/fonts/your-font-file.woff2') format('woff2'),
       url('/wp-content/themes/your-child-theme-name/fonts/your-font-file.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* This helps with performance */
}

Let’s break that down:

font-family: This is the name you will use to refer to the font in your code. It can be anything you like, but it’s sensible to use the actual font name.
src: This is the crucial part. It’s the path to your font files. You must update this to match your child theme’s folder name and the font file names.
font-display: swap;: This is a clever little command that tells the browser to show a default font while your custom one is loading. This stops your text from being invisible and makes your page feel faster.

Step 4: Apply Your New Font

You’ve defined the font; now you just need to tell your site which elements should use it. In the same Additional CSS box, add some more code like this:

/* Apply the font to all headings */
h1, h2, h3 {
  font-family: 'Your New Font Name', sans-serif; /* Use the name you defined */
}

/* Apply the font to the main body text */
body {
  font-family: 'Another Font Name', serif;
}

Notice that we add a fallback font (like sans-serif or serif) after the custom font name. This is just in case your font fails to load for some reason—the browser will use a standard font instead of something completely broken.

Hit Publish, and your custom font should now be live on your site!

Beyond the Font: Fine-Tuning Your Typography

Choosing a font is just the first step. To achieve a truly professional look, you need to pay attention to the details of sizing, spacing, and colour.

Changing Font Size, Weight, and Style

Font Size (font-size): This controls how big or small your text is. In the Editor, Customiser, or with CSS, you can set this in pixels (px), ems (em), or rems (rem). Rems are generally the best choice for modern web design as they scale well for accessibility.
Font Weight (font-weight): This controls the thickness of the letters. It’s usually a number from 100 (thin) to 900 (black/extra bold). normal is the same as 400, and bold is 700.
Line Height (line-height): This is the vertical distance between lines of text. Don’t squash your text together! A good rule of thumb is a line height of around 1.5 to 1.7 for body text. This gives it room to breathe and makes it much easier to read.

Picking the Perfect Font Colour

The most important rule for font colour is contrast. Your text must be easy to read against its background. Light grey text on a white background might look subtle and cool, but it can be a nightmare for people with visual impairments. Use online contrast checker tools to ensure your colour combinations pass accessibility standards.

You can change font colours easily in the Block Editor’s settings or in your theme’s Customiser, usually right next to the font family controls.

The Golden Rules of Web Typography

Now that you have the tools, here are a few simple principles to help you create a beautiful and effective design.

1. Don’t Go Overboard: Stick to Two or Three Fonts

It can be tempting to use all the shiny new fonts you’ve discovered, but resist the urge. Too many fonts make a site look chaotic and unprofessional. A classic, reliable strategy is to use just two:

One for headings (this can be more decorative and full of personality).
One for the main body text (this must be clean, simple, and highly readable).

2. Readability is King

Your primary goal is to make your content easy to read. A fancy script font might look amazing in a logo, but if you use it for a whole paragraph, your readers will give up. For body text, always choose a font that is clear and legible at smaller sizes.

3. Test on Mobile

More than half of all web traffic comes from mobile phones. A font that looks great on your big desktop monitor might be unreadable on a small phone screen. After you make changes, always check your site on your phone to make sure everything is still clear and well-spaced.

4. Think About Performance

Every web font you use, including each weight (regular, bold, italic), is an extra file that your visitor’s browser has to download. The more fonts you add, the slower your site can become. Be mindful. Stick to the font weights you actually need. Most of the time, regular, bold, and maybe an italic version are more than enough.

Conclusion: Your Site, Your Style

Typography is one of the most powerful tools you have to shape your website’s identity and create a brilliant user experience. As we’ve seen, WordPress gives you a whole range of options to take control of your fonts.

You can start simple with the built-in Site Editor or your theme’s Customiser for quick and easy global changes. When you’re ready for more choice, a plugin like Google Fonts Typography can unlock a massive library of creative options without any fuss. And for the ultimate in control and uniqueness, learning how to add fonts manually gives you the power to use any font you desire.

Don’t be afraid to experiment. Try out different pairings, adjust the sizes and spacing, and see what feels right for your brand. By following the steps and principles in this guide, you can move beyond the default settings and create a website that is not only beautiful and professional but also a true reflection of your unique style.