How to Add Custom Fonts to Your WordPress Site (4 Methods)

Fonts change how people feel about your site. A serious/”grand” font can make it dull. A warm font can make it inviting. That’s the power of type.

In this post, I show you how to add custom fonts to WordPress. I explain what custom fonts are and where you can find them online. Then I walk you through four simple ways to use them on your site.

You’ll see how to use WordPress’ built-in font library. You’ll learn how to fetch fonts from Google by hand. I’ll show you how to upload a font file directly to your site. And I’ll cover the easiest path: using a WordPress plugin. When we’re done, you’ll know exactly how to make your site typography look the way you want. Let’s get to it! ✍️

Understanding what custom fonts are (and why you may want to use them) 💡

The term ‘custom fonts’ is pretty broad. Since we’re talking about WordPress, however, we’ll use it to refer to any typeface the content management system (CMS) doesn’t include out of the box. There are thousands of custom font options that you can find online, and in general terms, nothing is stopping you from using any of them.

Keep in mind, though, the fonts you choose shouldn’t just be aesthetically pleasing. They should also meet some additional criteria:

A font is only as good as it is easy to read.
Every font you use has to fit in with the general style of your site.
A font must look good both on large and small screens.
Your font should be part of your branding. Over time, users might come to associate them with your site and business.

Where you can find custom fonts for your WordPress site

If you do a quick search for ‘free fonts’ using any search engine right now, you’ll find thousands of pages with broad selections to pick from:

The problem, however, is that a lot of those ‘free font’ websites don’t tend to have high standards when it comes to curating their selections. You may be able to find some jewels, but in many cases, they’ll also be full of fonts you wouldn’t be caught dead using even if you were working on a 2005 MySpace profile.

Fortunately, there are a lot of excellent font repositories that do go to great lengths to curate their collections. One of our favorites is Google Fonts, which offers over 1,800 font families in several languages, all of them free:

Another excellent option is Adobe Fonts (formerly Typekit), which provides over 5,000 font families to choose from. Keep in mind, though – to access them you’ll need a Creative Cloud subscription (any tier will do). If you’re an Adobe user, that means you already have access to the entire font collection:

These two sources alone will give you plenty of options to choose from!

Want to add custom #fonts to #WordPress? 🔤 Here are 4 easy ways to do it!

Click To Tweet

How to add custom fonts to your WordPress site

What follows are my four favorite ways to add custom fonts to a WordPress website:

Method 1: Use the built-in font library
Method 2: Fetch fonts from Google by hand
Method 3: Upload a custom font file to your site
Method 4: Use a WordPress plugin

1. Use the built-in font library in WordPress

If you’re using a WordPress block theme with full site editing (FSE) capabilities then you can use the native font library to import thousands of fonts from other sources – including both Google Fonts and Adobe Fonts. All you need to do is open up the full site editor by going to Appearance → Editor:

Next, click on Styles, then Typography:

From there, click on that little two-dash icon:

Then, go into the Install Fonts tab, and allow access to Google Fonts:

At this stage, you can import pretty much any Google Font you wish. Just click on it, select the variants you need, and then click on Install:

Okay, so the font has now been installed – you can now use it for whichever element of your page design.

2. Fetch fonts from Google by hand

If you’re not using a block theme, and you don’t want to upload font files to your website manually, you can always ‘import’ them from third-party repositories.

Google Fonts is the most known such repository, so we’ll use that one.

Once you find a font you like, click on Get Font at the top of the screen:

When you do that, another screen will appear, where you’ll need to click Get embed code. That will open up all of the embed code options:

This is the code that’s going to fetch the font from Google directly to your site.

You have a couple of options to add this code to your WordPress site.

If you have access to your theme’s header.php file and you’re not afraid to edit it, you can add that code snippet between the <head></head> tags of your header.
If you’d rather not mess with your theme’s files by hand, you can use a small plugin like Head & Footer Code and add the code through it. Just place it in the HEAD Code section:

That line of code is telling WordPress to import the font you selected from Google Fonts.

The last thing to do is to actually assign it to your paragraphs, headings, or whatever else you wish.

The easiest way to do that is to go to the Customizer – through Appearance → Customize:

Then to Additional CSS:

In there, you can create a bit of CSS code that will tell WordPress to use your new font for the specified piece of text on your site.

For example, if you want to use your new font for the main headings on the site, you can use this:

.h1 site-title 
{ 
font-family: "New Font", sans-serif; 
}

To learn more about styling text through CSS, read this.

3. Upload a custom font file to your site

This is a method that probably allows you the most freedom of the ones listed here. I mean, you can take whatever font file and use it on your site – there’s no limitation as to whether that font is available on Google Fonts, Adobe, or any other place on the web. You could even get a custom font designed 100% for you and then use that on your site.

Here’s how to do that:

First off, you’ll need, of course, the font file you want to upload to your site. Getting that font file is on you.

Once you have it, your path forward depends on whether you’re on a block theme or classic theme.

🤔 Not sure if you're on a block theme or classic theme?

Do you see the Editor link under Appearance?

If yes, then you’re on a block theme. If not, you’re on a classic theme.

For block themes

Go to the site editor (Appearance → Editor), into Styles, and Typography:

From there, click on that little two-dash icon:

Go into the Upload tab.

Simply drop your font file there.

With that, the font has been installed, and you can now use it for whichever element of your page design. You can set it in the same Typography section of the site editor.

Fot classic themes

The easiest way to get it to work on classic themes is to install our Orbit Fox plugin. (Go to Plugins → Add New and type in “Orbit Fox” in the box, then click on Install and Activate.)

With the plugin active, go to its settings panel and enable the custom fonts module:

At this stage, you’ll be able to upload font files to your site.

Orbit Fox supports all common font files, so just pick the one you’ve got and upload it to the right box. When done, click on Add New Font.

With that done, you will be able to select your font from the Customizer (Appearance → Customize):

4. Use a dedicated plugin for fonts

When it comes to using custom fonts, there are a lot of options to pick from.

Two really good ones that we recommend are the aptly named Fonts plugin, and the equally appropriately named Custom Fonts. After activating either tool, you’ll be able to pick from the entire Google Fonts catalog for your pages and posts, without the need to add any code to your website:

Either plugin comes with lots of helpful options and customizations. For many users, this can be the best path to getting custom fonts on their sites.

Go to top

Conclusion 🏁

If you pay attention to the fonts that websites use, you’ll notice that many of them stick to the same few tried-and-true choices. Some fonts are pretty safe bet when it comes to readability and user accessibility.

However, with thousands of options to choose from – both free and paid – it’s worth looking for one that also fits your website’s style and audience perfectly.

As for how to upload custom fonts to WordPress, you can go about it using four different approaches: