1. Home
  2. Help Center
  3. Customization
  4. How to add custom fonts?

It’s possible to use your own hosted font files.

1. Install the child theme

The theme installer will create a child theme. Make sure you are using the child theme to continue.

Create a fonts folder in the child theme.

Upload your font files in the newly created fonts folder. Your font must be ready to use for the web, the font file extensions are .ttf, .woff and .woff2

2. Edit style.css

Next, you’ll need to add some custom CSS within your child theme’s style.css file to reference this new font.

There’s a reference to local also. If the user happens to have the font already installed there’s no need to download it again.

Repeat the @font-face { } for each font variant (regular, bold, italic, etc).

@font-face { font-family: 'futura'; src: local('futura'), local('futura'), url('fonts/futura-400-regular.woff2') format('woff2'), url('fonts/futura-400-regular.woff') format('woff'), url('fonts/futura-400-regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-stretch: normal; font-display: swap; unicode-range: U+000-5FF; }
Code language: CSS (css)

3. Edit functions.php

Add the following code to the child theme’s functions.php file

function goya_custom_fonts( $standard_fonts ) { $my_fonts = array(); $my_fonts['futura'] = array( 'label' => 'Futura', 'variants' => array('regular','italic','700','700italic'), 'stack' => 'futura, sans-serif', ); return array_merge_recursive( $my_fonts, $standard_fonts ); } add_filter( 'kirki/fonts/standard_fonts', 'goya_custom_fonts', 20 );
Code language: PHP (php)

Note the references to futura in each place.

4. Apply it in the customizer

Now, when you edit a typography element in the customizer you should see this new font as an option in the dropdown. If you’ve done everything correctly it will render.

Was this article helpful?

Related Articles