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 a custom font in the 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 with your theme.
2. Download the font. The font file will have a .tff extension (e.g.: Georgia. off)

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 upload the file, the font URL structure will 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, and genesis-sample with the child theme directory name.

By default, it’s a Genesis sample. If you changed the directory name then change the url structure accordingly. And replace custom-font. off 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 the 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 the h1 tag as follows. Your font will be replaced 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.