WordPress How-to: Changing your theme’s font

A question I often get is how does one change the default font in a WordPress theme? Although this isn’t something built into my own themes, it is pretty easy to do. Below I’ll show you two ways you can do it.

Method 1 – Plugins

This is the easiest way to get new fonts into your WordPress theme. There are several great plugins out there. Here are just a few:

• Use Any Fonts is a well-rated plugin. I haven’t tried this one myself but it seems to be a favourite. No CSS knowledge is required.
• Easy Google Fonts is another option with lots of features. This plugin limits you to Google Fonts, but there is a huge selection of beautiful fonts for you to choose from. All for free. If you know a bit of CSS, you can take this plugin even further.
• If you have a Typekit account, you can use Typekit Fonts for WordPress, which lets you use all the gorgeous fonts they offer. If you are willing to invest a bit of money in your site, this is would be my top choice.

Method 2 – Uploading fonts

Maybe you purchased a font set and would like to use those on your site. You’ll need a little more tech-savviness and a bit of CSS-ing for this option but it’s still relatively easy to do. I’ll show you all the steps to get it working in any WordPress theme.

Here’s what you’ll need:

• Font files: the font you purchased normally come with all the files you need. This includes font files, instructions and a corresponding CSS file.
• Child theme. For anyone using one of my themes, I’ve simplified this step for you by offering the child theme on the theme’s purchase page. Just scroll to the bottom of the page and click the download button. If you’re using a different theme, you can still download one of the child themes I offer and tweak it for your own theme.

How to set up your fonts

In the example I’ll show you, I’m going to replace the default Perle header font with Calluna Regular, a free download from Font Spring.

When using fonts, you downloaded or purchased from the web, make sure to read the licenses that come with it. Not all font licenses are created equal so be sure you are within allowed to upload them to your site!

Step 1 – Grab your font files

Download and unzip your font folder. Inside you should see all the font files. Copy these files.

Step 2 – Create a folder in your child theme

Create a new folder in your child theme called “webfont”, or whatever else you prefer. Now paste your copied files into this folder.

Step 3 – Copy or write your @font-face CSS

Normally when you download a web font, it’ll include a stylesheet which has the @font-face CSS written out for you. Open this .css file and copy the CSS provided. In our example, Font Spring includes a file called stylesheet.css

If this stylesheet isn’t included with your font, you’ll need to write this out yourself. Below is some sample code for regular weight font (as in, not bold) with regular style (as in, not italic). Copy the code below and replace fontName with the name of your font and Your-Font-File-Name with your font’s file name. Make sure to create a new @font-face block for each font weight/font style combination you are including:

@font-face {
	font-family: 'fontName';
	src: url('Your-Font-File-Name.eot');
	src: url('Your-Font-File-Name.eot?#iefix') format('embedded-opentype'),
		 url('Your-Font-File-Name.woff2') format('woff2'),
		 url('Your-Font-File-Name.woff') format('woff'),
		 url('Your-Font-File-Name.ttf') format('truetype'),
		 url('Your-Font-File-Name.svg#callunaregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

Step 4 – Paste CSS code into your child theme

Paste your CSS in your child theme’s style.css file.

Step 5 – Make sure path to files are correct

Now that we have our @font-face copied over, we need to make sure the path to our font files matches in our css file. Because we put them in a folder called “webfont” we’ll need to set the path to that folder. Keep in mind the file path is relative to the style.css file.

Step 6 – Set your new styles

Like I mentioned earlier, for this example, we’ll be changing our theme’s header fonts. So last thing we need to do is add the CSS for that in our child theme’s style.css file, right under out @font-face.

Step 7 – Save child theme, upload to your site and activate

Save this file and the zip up the entire child theme.

Next, upload your zip file to your site’s theme directory. Same instructions as installing any theme for the first time apply. Here’s a step-by-step on how to do that.

Once uploaded, activate the child theme in your dashboard, and you’re done!