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.
If you don’t know what these files are or why are needed, make sure to first read our tutorial on 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 ).
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
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”
Hello Nik,
Great tutorial. However, it didnt work for me. does the RTL configuration on my website affect the implementation of this tutorial ?
Tnx !
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.
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.
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.
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
Hello Serge.
It is a specificity issue, try using the p.site-title a, .site-description selector and you should be good to go.