How To Add Custom Fonts

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:

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!

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