The Font Manager in the Total WordPress theme is a part of the Total Theme Core plugin which allows you to quickly and easily add or upload custom fonts to your site that you can use in the theme’s Customizer options and builder modules. You can select to define font families that you’ve already loaded via a child theme, load Adobe Fonts (previously known as Typekit), register Google fonts or upload your own custom font files.
The process is pretty straight forward:
- Go to Theme Panel > Font Manager
- Click on “Add New Font”
- Select a Type (Google, Adobe, Custom, ChildTheme/Other)
- Fill out the details depending on the type selected
When you define your own fonts for use in the FontManager it will remove all the default Google fonts from the theme’s Customizer options and builder elements.
This is an optimization to keep your site as fast and optimized as possible, by only showing you the options you need. If you define any fonts under the FontManage but want to continue using a Google font previously selected you can always add that font as well in the Font Manager to make it available for future use.
Preload Fonts to Improve Speed
When defining your fonts via the Font Manager the fonts become available for use in the Customizer and theme elements.
Generally we recommend registering only a few fonts for your site (most sites should only use 2: one sans and one serif) that will be used globally. However, because the theme can’t know how your registered fonts will work they aren’t loaded until requested.
Preloading your fonts is a good modern way to improve site speed and font rendering. In order to enable font preloading you will need to either use a custom font and check the box to preload the font file or if using a Google font you will need to enable the font globally to access the preload checkbox.
Self-Hosted Google Fonts
If you want to self host your Google fonts you can by simply adding a new font to the font manager and choosing the “Custom/Upload” option then uploading the font files.
Google doesn’t have any dedicated API for downloading web ready font files so we haven’t integrated automatic downloads for Google Fonts to the theme in order to prevent potential security/licensing concerns. That said, there is a very useful website you can use to download web ready Google fonts called “Google Webfonts Helper“.
Variable Fonts – Coming Soon!
We are working on a method for defining variable fonts in the Font Manager! For the meantime you could always add these to your child theme and then use a simple snippet to make your fonts available for selection in the customizer or in theme elements – view docs.