How to Add a New Font

The theme  enables you to use both Google Fonts and custom fonts in your design. In order to navigate to the font settings, go to Appearance -> Customize and select the Fonts Settings section at the bottom.



Your theme can load up to 3 different font families, including different styles and weights for each typeface.

How to Add a New Google Font

 In order to add a new font, go to the Load Fonts section.

 You'll find there the settings for each of the 3 font families available. Choose where you'd like to add a new font (Font 1, Font 2 or Font 3 sections), and fill out the font name, family and styles. If needed, make sure to double check the font details in the Google Fonts directory.


After filling out the details, click 'Save & Publish' and hit the F5 key to refresh the page.

 Now your font is available in your font settings. Navigate to the element you want to customize, and you'll be able to use the newly added typeface.

 E.g. if we go to the Heading 2 settings, we can select our new font in the dropdown list.



Make sure to save the changes and refresh your site.


Adding a Custom Font


When adding a font that is not included in the Google Fonts library, the process would involve an additional step of adding the font source files into the theme folder.

 Go to the wp-content/themes/free-church/css/font-face/ folder. That's where all of your custom fonts are located.

 Create a new folder and name it after your font. E.g. if your font name is 'Futura', the name of the folder should also be 'Futura'. Replace all the spaces in the folder name with dashes '-'.

 If your font has multiple styles and weights, make sure to create a separate folder for each of them.

 Your new folder has to contain a @font-face kit, which would load your custom font on a webpage. The easiest way to create it is by using a font face kit generator, such as Font Squirrel Generator.


 Upload your font file to the Font Squirrel Generator, and download the generated archive.

 Once you've got the archive, extract it into the newly created folder.

 Important! Make sure that the name of your folder corresponds with the font-family value in the stylesheet.css. Also, check that the spaces in the folder name are replaced with dashes '-'. E.g. if your stylesheet contains: font-family: 'Bebas Neue Bold', the name of your folder should be 'Bebas-Neue-Bold'.

 Now you need to do all the steps described in the first part of this article, which are as follows:

 Go to Appearance -> Customize -> Fonts Settings -> Load Fonts.

  1. Enter the font name, family and style.

  2. Save changes and hit the refresh button.

  3. In the Font Settings choose the element you want to customize. The new font is now available in the 'Font family' drop down list.

  4. Select the new font, save the changes, and refresh your page.

 Congratulations! If you visit your site now, you'll see your custom font in action.