Depending on your WordPress theme, your font options can be limited. Most WordPress themes, including my own, only come with some basic Google font options.

This tutorial is going to walk you through the steps on how to add your own custom fonts to your WordPress website. You can either install the fonts using a plugin, or manually without a plugin. Let’s get started!

So Why Use Custom Fonts?

Typography plays a important role in branding and web design. Good typography can add value to your website by increasing readability, making your content look more attractive and giving it a more professional aesthetic.

In most cases, your brand’s fonts won’t be available on the major font hosting sites like Google Fonts and Typekit. This means you’ll need to find an alternative means of displaying them.

Fortunately, it’s easy to convert your brand’s fonts into web fonts and embed them on your website. This process isn’t as difficult or tech-y as it sounds.

Where to Download Fonts?

A couple of my favorite places to purchase custom fonts:

Option 1: Install Fonts Using a Plugin

Once of the great things about WordPress is that there’s a plugin designed for almost anything!

The Use Any Font plugin will allow you to upload one custom font for free. If you wish to upload multiple custom fonts, you can purchase a personal license here for just $10 USD.

Step 1

Install and activate the Use Any Font plugin. Then from your dashboard, click “Use Any Font” on the left-hand side.

Step 2

Once on the Use Any Font window page in the API KEY section, click the “Generate Free Lite / API Key” button to generate your free license key. Then click the “Verify” button.

If you purchased a personal license to upload multiple fonts, you’ll need to add your premium key here instead.

Step 3

In the Upload Fonts section, click the Add Fonts button.

Next, type in the name of your font, then click the Choose File button to upload your font (accepted font formats are .ttf, .otf, and .woff).

Click the Upload button to upload the font. Repeat these steps to upload the rest of your fonts if you have purchased the personal license.

For this tutorial, I purchased the web font Muse by Harmonais Visual on Creative Market.

Step 4

Now your custom font is uploaded, but it’s not assigned to anything. There are 2 different ways you can assign the font to elements.

Option 1: Assign the Font in Use Any Font

In the Assign Font section, click the Assign Font button.

Next to “Select font”, choose your font from the dropdown.

Now, next to “Select elements to assign”, you can check off the boxes to select CSS elements where you want the font assigned. You can also add custom CSS elements in the “Custom elements” box if you’d like.

Click the Assign Font button when you’re finished.

For this tutorial, I’m going to assign the Muse font to my post titles and page titles.

After I clicked Assign Font and saved my changes, you can see the Muse font has been assigned to my post and page titles:

Note: I do not provide support for the Use Any Font plugin. If you need assistance or have questions about the plugin, please contact the plugin creators for support.

Option 2: Edit your style.css theme file

From your WordPress dashboard, head to Appearance > Theme Editor and in the style.css file you can change the font names. For example, you might find this somewhere in the style.css file:

h1,
h2,
h3,
h4,
h5,
h6 { 
font-family: 'Monsterrat';
font-weight: bold;
} 

This will target all of your headings. Simply replace the font family ‘Montserrat’ with your new font, like this:

h1,
h2,
h3,
h4,
h5,
h6 { 
font-family: 'Muse';
font-weight: normal;
} 

After you’ve made you font changes, save the file and you should see the changes on your site. If you don’t, try clearing your cache.

If you still don’t see your changes, it might be because something is overriding the font styles. In this case, you can force the font family like this:

font-family: 'Muse' !important;

Option 2: Install Custom Fonts Manually

Plugins may not always be the best way to add custom fonts to your website, especially if you have a slow website. Instead of using a plugin, you can manually add fonts to your website and add custom CSS to assign the font(s) to elements.

Step 1

Download the font you have purchased. It will most likely be a .zip file containing various file formats. If it’s a .zip file, you’ll need to unzip/extract the file. Inside, you’ll find your font files– the most common ones you’ll find are .ttf (TrueType Font) or .otf (OpenType Font). If you have specifically purchased a “webfont”, you’ll most likely also find .woff and/or .woff2.

For this tutorial, I purchased the web font Muse by Harmonais Visual on Creative Market. After downloading and unzipping the .zip folder, there was a font folder that contained my font in 3 different formats.

Step 2

Now we’re ready to begin adding these files to our website. First, we need to create the fonts folder in our theme folder.

Log in to your hosting and navigate to your file manager or cpanel. Depending on your hosting, your steps will be a tad bit different than mine, but should still be pretty similar.

I use Siteground, so I went to Siteground > Websites > Site Tools > Site > File Manager

Next, you’ll need to find your theme folder. In your website files, navigate to: public_html > wp-content > themes > Your Theme. I’m using my Honeydew theme for this tutorial so I opened the hm-honeydew folder.

*Some folders have been blocked out in the image above for privacy reasons.

Now we’re going to add a Fonts folder to our theme folder. Depending on your theme, you might already have a Fonts folder, and if you do, you can move on to step #3.

If you’re using Siteground like me, click the New Folder button to add the new Fonts folder.

If you’re not using Siteground, there should still be a New Folder button somewhere. If you don’t see it, you should be able to create a Fonts folder on your computer desktop and simply drag & drop the folder from your desktop into your theme folder.

Step 3

Now that we have created our our folder named “fonts”, we need to add the font files that we downloaded earlier to the folder.

Double click the fonts folder to open it up, then click the File Upload button at the top to upload the font files.

You can also simply drag and drop the font files into the fonts folder like this:

Now our fonts have been uploaded to our theme!

Step 4

Now head to your WordPress dashboard. Go to Appearance > Theme Editor and in the style.css file, add at the following code somewhere near the top:

@font-face {
  font-family: 'HV Muse';
  src: url(fonts/HV-Muse.otf) format('otf'),
       url(fonts/HV-Muse.woff) format('woff'),
       url(fonts/HV-Muse.ttf) format('truetype');
}
  • Change the font family to your own font name. This name can be whatever you want.
  • Adjust all of the urls so that it’s the same exact name as the name of the font files you uploaded to the fonts folder.

    For example: if your font files were named california-dreamer.otf, california-dreamer.woff, etc. then your code might look like this instead:
@font-face {
  font-family: 'California Dreamer';
  src: url(fonts/california-dreamer.otf) format('otf'),
       url(fonts/california-dreamer.woff) format('woff'),
       url(fonts/california-dreamer.ttf) format('truetype');
}

Now the font is ready to be used in your theme, but it won’t be applied to any elements until you add some CSS or edit the CSS of the theme file.

To apply the font to any element, edit the font-family styles in the style.css file. For example, this will change the font for all of my headings:

h1,
h2,
h3,
h4,
h5,
h6 { 
font-family: 'HV Muse';
font-weight: normal;
} 

You might need to change the weight of your font as well. If your font is bolder, you might need to use font-weight: bold; or font-weight: 700; instead.

If you don’t want to mess with the theme’s style.css directly, you can copy the styles and paste them in Appearance > Customize > Additional CSS instead. This way you can see your font changes live in the customizer and you won’t be messing with the original theme’s CSS.

It’s as simple as that!

This page contains some affiliate links. This means that I may receive a commission if you click on the link and decide to purchase. I promise everything I write here is my own, honest opinion. I will never recommend anything I don’t love, trust & use myself. I am SO grateful for your support!

Leave a Reply

Your email address will not be published. Required fields are marked *