How to Add Custom Fonts in WordPress

When you first install WordPress and start trying to design your site, one of the choices you’ll need to make up front is about text. What will your text look like? In addition to size and color and spacing, font or typeface is an important decision to make. (These two terms are often interchangeable even though they’re different. A typeface describes a style of lettering and a font refers to variations of a typeface like size and weight. For the purposes of this article, I’m gonna stick with font!)

Often, your theme will provide you with a few options for fonts. Or it will offer you a large list of free Google fonts. But for any number of reasons, you may want to use another one. Maybe you bought a custom one or had a custom one designed and that’s the one you want to use. WordPress allows you to upload custom fonts to be used with pretty much any theme. You just need to know what to do.

This is one of the things I struggled with most in my time using WordPress. Which is why I want to help you learn to do it! There are two main ways to accomplish this: uploading the font directly to the WordPress files or using a plugin.

Uploading the font directly

Generally speaking, this is the better way to accomplish using custom fonts with WordPress. It requires adding less code to the site overall, the site will usually load the font faster, and it’s more reliable. If you use a plugin and that plugin accidentally gets deactivated or encounters a conflict… the font will no longer work on the front end. Whereas uploading the font directly to the site files means that those files will need to be affected for the font to fail. And that’s just more difficult to do accidentally.

First things first, you need the font. The file you get should either be .otf, .eot, .ttf, or .woff. It’s possible when you bought your font it was delivered in a .zip folder. Unzip that folder to find the actual font files.

Note: I highly recommend using a child theme if you’re going to be adding files to your site like this. Learn how to create a child theme in this article! Before moving on, take a backup of your site!

Here are the steps for adding your files:

1. Open up your file editor and access the WordPress files.
2. In your child theme folder, add a new folder called fonts.
3. Upload your font files to this folder.
4. Go back to the child theme folder.
5. Create a new file called style.css
6. In that file, paste in the code provided here: https://pastebin.com/5D5sJge4 (HUGE thanks to Hostinger for making this so easily available) I’ve included screenshots below.
7. In the font face section, replace ‘YourFontName’ with your own font name, based on what the font files are called.
8. At the bottom of that bit of code, you’ll see that the code in question applies to body copy. Copy and paste that section over again and apply that CSS to any other type of text you want, such as headings and links. If you’ve uploaded more than one font – say one for body and one for headers – this is how you would differentiate which goes where.
9. Don’t forget to save your changes!
10. On WordPress, make sure your child theme is activated.

---

Using a plugin

If you don’t want to go into the site files and work with code, that is 100% okay. Luckily, you can upload fonts through plugins. Just make sure that you are monitoring and updating your site regularly to make sure these plugins are always functioning as expected.

Here are my two favorite plugins for custom WordPress fonts:

I’ve been using Use Any Font for years. It’s free to download and if you only need to upload one font to your site, it’s entirely free to use. The process involves uploading your font file, telling the plugin what kind of text you want to apply the font to, and you’re done! It’s a quick setup and has always been seamless for me. (Download)

Custom Fonts is a great alternative. It works slightly different to Use Any Font – upload the font file through the plugins settings. Then go to the Customizer and assign that font to your text. You should be able to add more than one font as of this article being written. (Download)

Hopefully this has been a helpful guide on adding custom fonts to WordPress. Happy designing!