Add custom fonts to your WordPress website using a child theme

A well crafted and easy to read font is a great asset for any website. It will catch the readers eye and it won’t tire them while they consume your content. There are many plugins that can help you add fonts to your WordPress site, but perhaps you want to avoid using them and prefer to do this the old fashioned way. It’s pretty easy, let’s take a look.

Create the child theme

Of course we will need a child theme, we’re going to base this guide on the WordPress Twenty-Seventeen default theme, so start by creating a folder called twentyseventeen-child, inside the folder create two files, the style.css and the functions.php ones, then paste the respective code into each one. When you are done you can go to Appearance > Themes in your dashboard and activate the new child theme.

/*
Theme Name: Twenty Seventeen Child
Version: 1.0
Template: twentyseventeen
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

<?php
// Place all your custom functions below this line.

add_action( 'wp_enqueue_scripts', 'twentyseventeen_child_scripts' );
function twentyseventeen_child_scripts() {
	wp_enqueue_style( 'twentyseventeen-parent-style', get_template_directory_uri() . '/style.css' );
}

If you don’t know what these files are or why are needed, make sure to first read our tutorial on child themes:

Beginner’s guide: Child themes

Adding the custom font

We will be using @font-face to add our custom font. To use this method your custom font needs to be in a proper webfont format, if not, don’t fret, fontsquirrel has a great online converter to help you with this.

The next step requires you to create a folder within your child theme’s root folder to upload your font files, we’ll name the folder fonts.

After the font files are uploaded to their proper location, edit the child theme’s style.css file and paste this just below the header we added when creating it. ( For this guide I’ll be using the Pacifico font ).

@font-face {
	font-family: 'pacificoregular';
	src: url('fonts/pacifico-webfont.woff2') format('woff2'),
		 url('fonts/pacifico-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

FontSquirrel’s generator will generate this code for you, you will find it in the stylesheet.css file in the webfontkit zip you will download. However you will need to add the fonts/ bit in front of the font filenames the src urls to let the browser know that the font files are in the fonts folder. Once this is done your font is ready to use.

To see it in action you can start by pasting something like this

.site-title {
	font-family: 'pacificoregular', arial, sans-serif;
}

in the child theme’s style.css file to set the site title’s font family to your newly added custom font. Notice that I have appended arial, sans-serif to the font-family attribute, these are fallback fonts in case the browser can’t render Pacifico, it will have something to resort to, generally it’s a good practice to follow. Save and check it out!

Pretty easy, right?