How To Add Custom Fonts

Note: This guide is intended for developers. If you aren’t a developer you may want to consider using a 3rd party plugin for adding your custom fonts or seeking some help from a freelancer. If you use a plugin to add custom fonts and just need some help making those custom fonts available in the Customizer and page builder modules open a ticket so we can help with the custom code for that.

The Total theme doesn’t include a function for automatically adding custom fonts to your site, this would simply add bulk to the theme that will slow down most people so it’s best left out. That said, as a developer you could easily add a custom font via a child theme – you should always use a child theme anyway!

1. Setup your Child Theme if you don’t have one Yet.

If you don’t have a child theme yet you’ll want to set one up. This can be done via a 3rd party child theme plugin or you can follow the guid here to download a sample child theme for Total.

Child Theme Guide

2. Add Your Font To Your Child theme or Custom CSS Panel

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.
  2. Create a new folder called “fonts” in your child theme and add your new formatted, web-ready fonts inside.
  3. Import your new fonts in your child theme’s style.css. Example below:
@font-face {
    font-family: 'Your Custom Font';
    src: url('fonts/webfont.eot'); /* IE9 Compat Modes */
    src: url('fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/webfont.woff') format('woff'), /* Modern Browsers */
         url('fonts/webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('fonts/webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

2. Add Your Font To The Total Theme Customizer/Module Settings

Now you can add the following function to your child theme's functions.php file and tweak it to include your custom font or fonts. This will add it to the Typography options drop-down so you can select it in the theme options and it will output the correct CSS for you - sweet!

// Add custom font to font settings
function wpex_add_custom_fonts() {
	return array( 'My Custom Font' ); // You can add more then 1 font to the array!
}

Result below:

You should now see your custom font at the top of the Typography "Font Family" options under a new "Custom Fonts" heading.

custom-fonts

editor-custom-font

Remove Google Fonts

If you are using custom fonts on your site you should consider removing the built-in Google fonts from the theme to slim things down. To do this go to the main Theme Panel and check the box to remove the Google Fonts and click save.