Custom Fonts

You can add custom fonts to the typography dropdown in the WordPress customizer by adding this filter to your child theme’s functions.php.

// Custom Font Group
function wpbf_custom_font_group( $custom_choice ) {

	$custom_choice['families']['custom_font_group'] = array(
		'text' => __( 'Custom Fonts' ),
		'children' => array(
			array( 'id' => 'kitten, sans-serif', 'text' => 'Kitten' ),
			array( 'id' => 'font-2, sans-serif', 'text' => 'Font 2' ),
		),
	);

	$custom_choice['variants'] = array(
		'kitten, sans-serif' => array('200', '300', '400', '400italic', '500', '500italic', '600', '600italic', '700', '700italic', '800', '800italic', 'regular', 'italic'),
		'font-2, sans-serif' => array('700', 'regular', 'italic'),
	);

	return $custom_choice;

}

add_filter( 'wpbf_kirki_font_choices', 'wpbf_custom_font_group', 20 );

text: optgroup headline for the typography dropdown
id: the css font-family attribute (e.g. ‘your-font, sans-serif’)
text: the font name that gets displayed in the typography dropdown
variants: the id, followed by the font weight & styles that should be available for the particular font


Available variants

‘100’
‘100italic’
‘200’
‘200italic’
‘300’
‘300italic’
‘regular’
‘italic’
‘500’
‘500italic’
‘600’
‘600italic’
‘700’
‘700italic’
‘800’
‘800italic’
‘900’
‘900italic’


Adding custom fonts to your website

The method above lets you chose your own set of fonts from the typography dropdown. Note that you still need to add the fonts to your actual website.

If your font is not ready for web use, you can use a webfont generator like font squirrel.
Note: The fonts you’re creating must be legally eliglible for web embedding!

1. Create a folder in your child theme called fonts and upload your font files (.woff, .woff2, etc.) to the fonts folder via ftp.

2. Now load your font from your child theme’s style.css using the @font-face method.

@font-face {
	font-family: 'kitten';
	src: url('fonts/kitten_light-webfont.woff2') format('woff2'),
	url('fonts/kitten_light-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

3. Done! You have successfully added your custom font to your website and can now select it from the typography dropdown in the WordPress customizer.

Here’s how the CSS-outupt looks like to get an idea of how the id’s above work.


Custom Fonts IntegrationPremium

With the Premium Add-On for Page Builder Framework, adding custom fonts to your website can be done in the WordPress customizer.

To do that, navigate to Typography -> Custom Fonts and click Enable Custom Fonts.

Add a Custom Font

  • Click on Add new Custom Font
  • Give it a name
  • Enter the font-family value for the font
  • Upload your font files

To actually see the custom font in your typography dropdown, you will have to publish changes & refresh your browser window.

Elementor & Beaver Builder Integration

Your custom fonts will also appear in Elementors & Beaver Builders Typography dropdown.

Page Builder Framework

A Page Builder’s best friend.

Sign up for the Newsletter

Get notified about the latest features and updates.

Join the Community

Cookie Preference

Please select an option. You can find more information about the consequences of your choice at Help. Privacy Policy | Imprint

Select an option to continue

Your selection was saved!

Help

Help

To continue, you must make a cookie selection. Below is an explanation of the different options and their meaning.

  • Accept cookies:
    All cookies such as tracking and analytics cookies.
  • Reject tracking cookies:
    No cookies except for those necessary for technical reasons are set.

You can change your cookie setting here anytime: Privacy Policy. Imprint

Back