How to Use Custom Font In WordPress Genesis Child Theme

Genesis child theme comes with its own font type. If you want to change it, you can use any other free or paid custom fonts. In this tutorial I have added the steps for setting up custom font in WordPress genesis child theme.

Custom Font in WordPress Genesis Child Theme

Before getting started with the configuration, you need to do the following.

1. First you need to find the font type that you want to use it with you theme.
2. Download the font. The font file will have a .tff extension (eg: georgia.tff)

Once the font is downloaded to your local system, you need to upload it to your genesis child theme directory. You can do this via FTP or the wordpress theme editor.

Once you uploaded the file, the font url structure would look like the following.

https://example.com/wp-content/themes/genesis-sample/custom-font.ttf

In the above URL, you need to replace example.com with your website name, genesis-sample with the child theme directory name. By default its genesis-sample. If you changed the directory name then change the url structure accordingly. And replace custom-font.tff with your actual font name.

You can verify the font upload by visiting the full URL. If the url is correct, the font will be downloaded from the URL.

Next, in your style.css file, you need to add the following @font-face entry as shown below. It will load the font when you browse the website. You should replace font-name with your font name and the URL with your font URL.

@font-face {
	font-family: font-name;  
	src: url(https://example.com/wp-content/themes/genesis-sample/custom-font.ttf);  
	font-weight: normal;  
}

Now the font is accessible through your website. You can use this custom font anywhere in your stylesheet.

For example, you could use it for h1 tag as follows. your-font will be replace by your custom font.

.h1 blog-title {
font-family: "your-font", Arial, sans-serif;
}

Once you update the css, make sure you purge your website cache and CDN cache if you use any. Also check your website for changes after clearing your local cache. Hope this tutorial helps.