Font Integration in Block Themes:
Fonts play a crucial role in a site’s design, including WordPress themes. In classic PHP-based themes, developers often use services like Google Fonts in the WordPress Customizer. However, this isn’t well-documented for WordPress block themes, and the WordPress Theme Handbook doesn’t provide guidance on integrating Google Fonts for them yet
In this article, we’ll explore how to use Google Fonts in block themes. While block themes can incorporate Google Fonts, the method for registering them differs significantly from what you may have done in classic themes.
Font Setup in WordPress Block Themes:
As I mentioned, there isn’t much guidance available to start with. The Twenty Twenty-Two theme, being the initial block-based default WordPress theme, shows one method: using downloaded font files as assets.
However, it’s somewhat complicated as it requires two steps:
1. Registering the files in the functions. php file
2. Defining the bundled fonts in the theme. json file.
Since Twenty Twenty-Two, it’s easier. Bundled fonts in Twenty Twenty-Three don’t need registration. But, we still have to download and bundle font files manually. This isn’t ideal as it’s not as simple as using hosted fonts served on a fast CDN.
Adding Fonts to Block Themes:
Did you know about the Gutenberg project? It’s a plugin for testing new WordPress Block and Site Editor features early. In a recent Theme Shaper article, Matias Benedetto, the project lead architect, explains how to add Google Fonts or other downloaded fonts to block themes using the Create Block Theme plugin.
Block Theme, developed and managed by the WordPress.org team, seems like the most reliable option for incorporating Google Fonts into a theme. However, it’s essential to acknowledge that the plugin is continuously evolving, so expect changes.
Before delving into how it functions, let’s quickly review the “conventional” method of adding Google Fonts to traditional WordPress themes.
Certainly! Let’s break it down into easy-to-follow steps:
Using Google Fonts with Block Theme:
- Defining Fonts in theme.json: With Block Theme, integrating Google Fonts is hassle-free. Simply navigate to your theme’s
theme.jsonfile. Here, you can specify the Google Fonts you want to include in your theme. Use thefont Familyproperty to define the font family and its variants.
- Applying Fonts to Blocks: With Google Fonts integrated into your theme, you can easily apply them to individual blocks within the WordPress editor. When editing a block, navigate to the typography settings, where you’ll find the list of available fonts. Select the desired Google Font from the dropdown menu to apply it to the block.
Removing Google Fonts:
- Update theme.json: To remove a Google Font from your theme, simply go back to the
theme.jsonfile. Locate the font you want to remove and delete its entry from thefont Familyproperty.
Also Read: CSS Game Changer: Mastering :has() for Style
- Update Stylesheet: After removing the font from
theme.json, Block Theme automatically updates the stylesheet to reflect the changes. The font will no longer be enqueued, ensuring it’s no longer loaded on your site.
Conclusion:
Block Theme simplifies the process of integrating and managing Google Fonts in your WordPress themes. With intuitive controls in the theme.json file and seamless application within the WordPress editor, developers can effortlessly enhance their theme’s typography. Plus, the ability to remove fonts just as easily ensures flexibility and efficiency in theme customization.