We have just rolled out another update for our whole theme and Pro add-on collection. The newest versions bring you revamped typography options with many smaller improvements and bug fixes.
Better Local Font Hosting
For privacy and performance reasons we think that hosting Fonts locally is much better than loading them directly from Google servers. Until now, we have therefore bundled a small and carefully selecteded amount of fonts in our products. Since font files are quite large the number of available local fonts was always very limited.
With the latest updates we have decided to use the new official Webfont Loader package from the WordPress.org Theme Team. Here’s how it works: With the Pro add-on, you can now select between all Google Fonts in the Customizer. Once a new font is selected and saved, the font is downloaded from Google and stored locally in the /wp-content/fonts/ folder in your WordPress installation.
Your website visitors are then served with locally hosted fonts, without any connection to the Google servers. Only the Live Preview in the Customizer still loads fonts directly from the Google Webfont API. For previewing and trying out dozens of new fonts it is technically not feasible to download and store them all locally. This is only done for the ones you end up using.
Using CSS Variables
We have also adapted the Stylesheets in all our Themes and Pro add-ons to use CSS variables for font families and font styling, instead of hard-coded values. CSS Variables are a really great feature for theme developers but adoption has been slow since they are not supported in Internet Explorer. With IE finally being phased out, the time for wide-spread use has finally come. For example, the new Gutenberg Editor and the new Twenty Twenty-One theme make high use of CSS properties as well.
One of the big advantages of CSS variables are far easier modifications and changes to the default values. Instead of having to override dozens of CSS classes to change one simple thing, you only have to adjust the value of the variable. This makes the implementation of styling options in the Customizer and custom modifications with CSS snippets much simpler.
New Font Style options
While the changes mentioned above work in the background and are not at all visible, you will notice new Font Style options in the Typography settings. You can now adjust the font weight and uppercase styling of titles and navigation menus directly in the Customizer, without needing custom CSS code.
Updated Themes and Add-ons:
The updates were made for all current themes which are not scheduled for retirement in 2022.