Add custom fonts to your WordPress website using a child theme

Last Updated On
Add custom fonts to your WordPress website using a child theme WordPress template

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
*/
style.css
<?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' );
}
functions.php

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;
}
@font-face

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;
}
Logo Font Change

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?

6 responses to “Add custom fonts to your WordPress website using a child theme”

  1. Tranceman says:

    Hello Nik,

    Great tutorial. However, it didnt work for me. does the RTL configuration on my website affect the implementation of this tutorial ?

    Tnx !

    • Nik says:

      Hello.
      This could happen perhaps if you are using a font that does not support the displayed language’s script, but it could also be due to plugins/page builders loading their own fonts with more specificity. Unfortunately it’s hard to guess because each case is unique.
      Best regards.

  2. raha.ab says:

    Hi
    Thanks for sharing this mettod,
    I’m using Betheme and asked them to help but it’s not the support rules for them and they are not helping me in this case. So I need add font to child them , Now I have add custom fonts in my theme from editing the rtl.css (added the font family with url’s) and in muffin-options/fonts.php / I removed google web fonts and add my custom fonts.
    Now I need to know how add them in my child ?
    Thanks.

    • Nik says:

      Hello.
      You can copy the fonts folder in your child theme’s root folder and then follow the steps outlined in the article to load them in the child theme. Once you are done you can activate the child theme and continue.

  3. Escale says:

    Hi
    I tried to change the font type for the title site and description site. I’ve succeed to modify the font of description site but i’m still stuck to change the font of the title of my site. I’m using un child theme.

    Code of style.css in the chlid folder:
    @import url(‘https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister’);

    .site-title a, .site-description{
    font-family: ‘Love Ya Like A Sister’, cursive;
    font-size: 24px;
    color: red;
    }

    Any clue ?
    Thank’s for your help

    Serge

    • Nik says:

      Hello Serge.
      It is a specificity issue, try using the p.site-title a, .site-description selector and you should be good to go.

Leave a Reply

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

Get access to all WordPress themes & plugins

24/7 Support Included. Join 115,000+ satisfied customers.

Pricing & Sign Up

30-day money-back guarantee. Not satisfied? Your money back, no questions asked.

Back to top