How to Add a New Font to the Theme

The theme includes a collection of Google Fonts, which you can find in Appearance -> Fonts and colors -> Fonts.



However the list of available fonts can be expanded by adding new ones.


Adding a New Google Font

 If you want to add a new font from the Google Fonts library, open the core.lists.php file in the  wp-content/themes/your_theme/fw/core/ directory.

 Find the your_theme_get_list_fonts() function on line 1212 (where "your_theme" is the theme name).



You'll see an array of Google fonts. Duplicate one of the font entries and replace the name of the font with your own. The line would look like this:

 'Cabin Condensed' => array('family'=>'sans-serif'),

 If in doubt which name to pick, consult with the Google Fonts repository.

 After saving the file, go to the admin panel, navigate to Appearance -> Fonts & Colors, and choose the Fonts settings. Now your new font is available for all typography elements.


Adding a Custom Font

 When adding a font that is not included in the Google Fonts library, the steps would be different.

 Go to the wp-content/themes/your_theme/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'.

 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. E.g. if the name of your folder is 'Bebas Neue Bold', make sure that the stylesheet contains: font-family: 'Bebas Neue Bold';

 Now if you go to the Appearance -> Fonts & Colors, you'll see your new typeface available among the other fonts.