How To Add Custom Fonts using Code

Important Notice: Font Manager Now Available!

This older guide is intended for developers, in Total 5.0 we released a new Font Manager admin panel where you can easily add your own custom fonts via the WordPress dashboard.

This step-by-step guide explains how to manually register custom fonts for use with the theme’s Typography Customizer panel and theme elements. It’s intended for developers who prefer not to use the Font Manager and would rather add fonts directly through code.

1. Step 1: Enable a Child Theme

If you’re not already using a child theme, we recommend installing and activating one. This lets you add custom code to your site without relying on a third-party snippets plugin, helping you avoid unnecessary bloat. Please refer to the Child Theme Guide to learn everything you need to know about child themes and to download a sample child theme.

2. Step 2: Add Your Font to the Child Theme

Below are the condensed steps for adding a custom font to your child theme, this of course assumes you know some basic web development.

  1. You’ll need to first grab your custom font and if it’s not in @font-face format you will have to format it correctly. We recommend the FontSquirrel Web Font Generator tool.
  2. Create a new folder called “fonts” in your child theme and add your new formatted, web-ready fonts inside.
  3. Register your font using @font-face in your child theme’s style.css file. Ex:
@font-face {
  font-family: 'My Custom Font';
  src: url('/fonts/my-custom-font.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

2. Register the Font with the Theme

The next step is to register your font with the theme so it appears in the Font Family dropdown for theme elements and in the Customizer Typography tab. To do this, add the wpex_add_custom_fonts() function to your child theme’s functions.php file, setting it to return an array of your custom font families.

// Register custom fonts with the theme
function wpex_add_custom_fonts() {
	return [ 'My Custom Font' ];
}

Note: Alternatively, you can add custom fonts that are registered outside the Font Manager via the Font Manager by selecting the “Other” font family type.

Recommended: Remove Google & Other Font Choices

If you’re using custom fonts on your site, it’s a good idea to streamline the font family options by removing the many Google Fonts you don’t need. When using the Font Manager, this is handled automatically. If not, you can achieve the same result by using theme hooks.

add_filter( 'wpex_google_fonts_array', '__return_empty_array' );
  • Last updated on
Back To Top