How to use a custom font in Neve

Are you using Neve and want to add a custom font? Just follow the steps presented in this guide.

1. Want to use an Adobe font? Check the Typekit Fonts module.

2. Do you have your own font and don't want to code? Check the Custom Fonts module available in the Orbit Fox plugin.

3. Want to add a new font without using additional plugins? Follow the steps below.

1

First, you need to create a child theme for Neve. You can also download a ready-made one from our documentation

2

Add the font file to the child theme folder

Download a font. In this example, we'll add this font. In your child theme create a folder called fonts and add there the BionicKidSimpleSlanted.ttf you've downloaded.

3

Load the font by adding the following code at the end of the functions.php file within the child theme

function add_custom_font() { 
	$font_path_ttf = get_stylesheet_directory_uri() . '/fonts/BionicKidSimpleSlanted.ttf';
	?>
	<style type="text/css">
	@font-face {
		font-family: 'BionicKidSimpleSlanted';
		src: url( <?php  echo esc_url( $font_path_ttf ); ?>)  format('truetype');
	}
	</style>
	<?php
}
add_action( 'wp_head', 'add_custom_font' );
add_action( 'customize_controls_print_styles', 'add_custom_font' );


function add_custom_fonts( $localized_data ) {
	$localized_data['fonts']['Custom'][] = 'BionicKidSimpleSlanted';
	return $localized_data;
}
add_filter( 'neve_react_controls_localization', 'add_custom_fonts' );
4

Use the newly added font directly in the Typography options within the Customizer

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.