Altering Default Fonts & Typography

Total includes a custom Typography class built exclusively for Total that provides you with a live preview while in the Customizer so you can see font and typography changes right before your eyes as you make the edits! Also all typography options are looped through and the CSS is generated then saved in it’s own theme mod for adding into your header, thus greatly speeding up your site (unlike most themes that don’t do this).

How To Alter Your Fonts & Typography

Simply go to the Customizer and click on the “Typography” panel. Here you can select the part of your site to edit, modify accordingly then save your changes. So easy!

typography-panel

typography-options

Enable The Correct Font Subsets

By default the Total theme only loads the Latin font-sets for Google Fonts. Under the general tab in the Typography Customizer panelĀ – Appearance > Customize > Typography > General – you can choose the subsets you need.

subsets

Defer Google Font Loading

By Default Google Fonts are added to the header of the theme so that when your site loads it loads with the correct fonts. However, you can defer loading of the fonts to the footer which can increase site loading speed but will also create a small “flash” when the site changes fonts. This is done at Appearance > Customize > Typography > General > Load Fonts After The Body Tag

defer-google-fonts

Can you add your own custom fonts to the options list?

Yes you can! With a very easy function in your child theme you can add your own fonts to the theme and select them right in the Customizer, yay!

Add Custom Fonts