How to Add a New Font to the Theme

Note: Before making any changes to your theme files, go to Appearance -> ThemeREX Addons, and enable the Debug Mode. Don't forget to turn it back off, once you're finished the customization.

 Your font settings are located in theme-options/theme.options.php.

 Open theme.options.php and find the Theme Fonts section. It contains an array with website elements and their corresponding font settings.



You can add both Google Fonts, as well as custom fonts in there.

 Adding a Google Font

 Decide which element you want to customize and replace the default font values with your own.

 Go to Google Fonts, select the font you're going to use, and locate the URL parameters and CSS values.


 1. In the 'family' key, specify the font name and category, e.g.:

 'family'=> '"Open Sans", sans-serif',

2. Add another key-value pair, specifying the URL parameter, e.g.:


'link' => 'Open+Sans:400,700,400italic'

3. Save the file.

 If you refresh your page, you can see your new font in action.


Adding a Custom Font

 When adding a custom font, instead of the URL parameter, you need to specify the path to your custom font using the 'css' key-value pair, e.g.:

 'h1' => array(

'family'=> '"Antonio", sans-serif',

'css'   => '/css/font-face/your-font-name/stylesheet.css'


 In the css/font-face/ directory, create a new folder and give it a name of your font.

 The 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 (visit our tutorial to see how to use it).

 Important! Make sure that the name of your folder corresponds with the font-family value in the stylesheet.css.

 Now your custom typeface is successfully added into your theme.