How to Add Custom Fonts to your Genesis Child Theme

by crisa28 | Oct 1, 2019 | Tutorial Genesis Framework, Wordpress Tutorial

Adding a unique font to your website is a great way to make your design stand out online.

In this post, I´ll walk you through the step-by-step process for adding any font to your website.

UPLOADING AND USING CUSTOM FONTS IN GENESIS CHILD THEMES

1) Download the font to your computer and extract files if necessary.

Dafont and FontSquirrel are a great source of fonts that are free for commercial use.

I have several posts with awesome fonts for your project:

• 12 premium serif fonts for a website

• 12 free handwritten script fonts for creative projects.

• Pinterest board.

If you would like a more premium/unique font, you can use Creative Market.

The font I’m using in this tutorial, Simplicité, was purchase on Creative Market ($19)

2) Create a WebFont Kit for cross-browsing

Upload your .ttf or .otf file to the Webfont Generator and then download your Web Font Kit.

You´ll di

Now your fonts are ready for the web, you can add them to WordPress. Thankfully, as is often the case with WordPress, this is a relatively simple process thanks to the power of plugins. Let’s dive in.

Typically this kit will include multiple file extensions such as  (.woff), (.woff2) and (.css).

3) Upload the font files to your website

Upload your font file to wp-content/themes/your-theme/fonts directory. Create a separate fonts folder if you don’t have one yet.

You can use an FTP client like FileZilla or Hosting File Manager for this task. In our example,

You have to upload (.woff) (.woff2) archives.

I have uploaded hv_simplicite_regular-webfont.woff and hv_simplicite_regular-webfont.woff2 archives using the File Manager in hPanel.

To upload a file through cPanel’s File Manager, please do the following:

1. Login to cPanel and open the File Manager.
2. Navigate to the folder where you want the upload to be located.
3. Click on the Upload icon from the top toolbar.

4) Tell WordPress where to find the font

Open the CSS file in a text editor such as Textedit, NotePad or Sublime.

You´ll find a code like this:

@font-face {
font-family: 'hv_simpliciteregular';
src: url('hv_simplicite_regular-webfont.woff2') format('woff2'),
url('hv_simplicite_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

}

Replace the existing source URL with the new URL you created by uploading each file.

After update:

@font-face {
font-family: 'customfont';
src: url('wp-content/themes/yourtheme/fonts/hv_simplicite_regular-webfont.woff2') format('woff2'),
url('wp-content/themes/yourtheme/fonts/hv_simplicite_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

}

Then, go to Appearance > Customize > Additional CSS  > add the following code.

Replace the existing source URL with the new URL you created by uploading each file.

By default, the source URL location is set within the downloaded Web Font Kit. It needs to be replaced by the location on your server.

Here’s my font:

@font-face {
font-family: 'hv_simpliciteregular';
src: url('wp-content/themes/Meryl_Theme/fonts/hv_simplicite_regular-webfont.woff2') format('woff2'),
url('wp-content/themes/Meryl_Theme/fonts/hv_simplicite_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

}

Importantly, make sure you change the font name and the URL (copy the URL for the font file on your server).

You can then go ahead and use CSS rules to update the fonts on your site. Here’s an example of how to apply the custom font to Header 3 and paragraph sections…

5) Assign the font to elements style (headings, body, etc..)

Now you have to define which elements will use the new font.

To assign to the headings:

h1, h2, h3 {
font-family: 'font name';
}

To assign the font to the body (all content):

body {
font-family: 'font name';
}

For example, I want to assign the font to theme title´s:

Here’s the final result: