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

Typography is more important than most people give it credit for. The fonts you use not only impact your website’s presentation, they can also make it stand out from other sites and render your content easier to read. Picking the same fonts as everyone else might be a safe bet, but it can be worth your while to add custom fonts to WordPress.

Although WordPress includes a decent variety of font options out of the box, there are plenty of ways to improve on that selection. If you know how to include custom fonts on your website, you’ll be able to pick from thousands of exciting options. This will enable you to find a font that fits your niche and audience.

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:

• Each font you include should be easy to read.
• It needs to fit in with the general style of your website and the other fonts you use.
• Letters should look good at both large and small sizes, since you need to keep mobile responsiveness in mind.

Aside from these technical considerations, fonts provide you with an additional way to express your site’s style. They can become a part of your branding, and over time users might come to associate them with your site and business. So you’ll want to consider your choices very carefully.

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 hundreds 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,600 font families in several languages, all of them free:

Another excellent option is Adobe Fonts (formerly Typekit), which provides over 25,000 fonts 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. Keep in mind when making your selection that each font you choose should fit in with the rest of your site’s style, and be easy to read. Once you’ve found a few fonts you like, all that’s left is to add them to your website.

How to add custom fonts to your WordPress site (four methods) ➕ 🔤

When it comes to custom fonts, WordPress provides you with several ways that you can implement the options you want. Let’s go over what each involves, so you can select the method that works best for you.

• Method 1: Use the built-in font library
• Method 2: Edit your theme’s file
• Method 3: Upload your font’s file to your theme’s folder
• Method 4: Use a plugin

1. Use the built-in font library

If you’re using a WordPress block theme with full site editing (FSE) capabilities and you have WordPress version 6.5 (or higher) installed, 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, and when the menu shifts over, click on the little pencil icon to Edit Styles. You’ll then be brought into the FSE interface, with Styles (the split-circle icon) being chosen by default. From there, click on Typography:

This will unlock a list of available fonts but to gain access to Google Fonts, you’ll need to open up the font library by clicking the icon to the right of the subheading titled FONTS. It should look like two lines above one another, with a single dot inside each line. You can see it in the righthand side menu of the screenshot below:

Once the font library window is open, tap the third choice – Install Fonts.

Finally, click Allow access to Google Fonts.

It’s as simple as that. With Google Fonts connected, you can browse through more than 200 pages of font selections. When you’re done choosing the ones you like, you can apply them globally across your site, or locally, within individual pages or posts.

2. Edit your theme’s file

If you’re not using a block theme or you’re using a version of WordPress below 6.5, and you don’t want to upload font files to your website manually, you can always ‘import’ them from third-party repositories. With Google Fonts, for example, you can open any font page you want and click on Get Font at the top of the screen:

Once 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:

The code should be placed within the <head> tags of your child theme’s header.php file. You can find this within your theme’s folder in the public_html/wp-content/themes directory.

With that line, you’re telling WordPress to import the option you selected from Google Fonts. To use it, though, you’ll also need to open your child theme’s stylesheet and specify which elements should take advantage of your new font. Here’s what that code should look like:

font-family: 'Roboto', sans-serif;

Remember, your child theme’s stylesheet should be within the same directory as its header.php file. That means you can take care of both tasks in the same place, and implement new fonts in just a few minutes.

3. Upload your font’s file to your theme’s folder

If you’re all about performance optimization, uploading font files to your website directly can enable you to shave a few milliseconds off your loading times. The first thing you’ll need, of course, is the font file you want to upload to your server:

Since WordPress doesn’t include a dedicated fonts folder, you’ll want to create one using your trusty FTP client. You can add the folder wherever you want, but we recommend placing it within your themes directory so you can keep track of it. Set it up now, and upload your font file to the new folder:

Once the file is in place, open up your child theme’s stylesheet. Now you’ll need to call on that font so you can use it, via a snippet that should look like this:

@font-face {
font-family: New Font;
src: url(http://www.yourwebsite.com/wp-content/themes//fonts/your-new-font.ttf);
font-weight: normal;
}

Please note the font family name and URL above are placeholders, which you’ll need to replace with the right information.

Once you’ve entered this code, don’t close your theme’s stylesheet just yet. You still need to configure which elements will use the new font, with some code that’s very similar to what we looked at in the last section:

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

In this example, we’re configuring our H1 subheadings to use the new font. However you can replace that with any other element you want, or multiple elements if you’d like to change the font in more than one place.

4. Use a plugin

As is often the case, the easiest way to implement new functionality in WordPress is to install a plugin. 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:

With both plugins, you can also upload fonts to your website right from the dashboard, and use the Customizer to pick where and when to use them. However, if this is something that’s important to you and you want a 100% free solution, then Custom Fonts is the better option of the two. The Fonts plugin only allows you to upload custom fonts in the paid version. Overall, either of these choices makes it a breeze to add new custom fonts to your site.

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.