Create Block Theme has a fantastic new feature that enables theme developers to add external fonts to their block theme. Whether you want to download a font from Google fonts, or install a font you’ve downloaded elsewhere, Create Block Theme makes it painless to add them to your block theme.

Learning outcomes

1. Installing Create Block Theme
2. Create Block Theme’s theme development features
3. Managing block theme fonts
4. Adding a new Google Font
5. Adding a new Local Font

Comprehension questions

1. What two types of fonts can you add via Create Block Theme?
2. Is it possible to select multiple font variants when adding a Google Font?
3. When adding a Google Font, does the font get downloaded to the theme?

Video Transcript

View Transcript

Hey there, and welcome to Learn WordPress.

Today you’re going to learn how to add fonts to your block theme using a handy plugin in the WordPress plugin repository called Create Block Theme. After a short introduction to using Create Block Theme, we will cover how to install it in your WordPress site, recap its theme creation features, and then see how it can manage your funds.

Create Block Theme works in conjunction with the Site Editor to allow you to create and edit block themes right from the WordPress dashboard. Whether you’re developing your new theme on top of a base theme or starting a new block theme from scratch, you will find Create Block Theme very useful. You can install Create Block Theme through the plugins page of your WordPress installation. First navigate to the list of plugins then click on the Add New button in the search box on the top right search for Create Block Theme This will search the WordPress.org plugins repository. Once the plugin is found, click on Install Now to install it. After it’s installed, click Activate to activate it in your WordPress install. Once activated the Create Block Theme’s submenu will appear under the Appearance menu in the dashboard.

Alternatively, you can also search for Create Block Theme in the WordPress plugins directory at wordpress.org/plugins.

To install it, download the plugin zip file and install it manually through the Add New Plugins screen.

Once installed Create Block Theme offers a series of options that streamline your block theme development. You can export the currently active theme and all changes saved in the editor. Create a child theme of the active theme based on the changes saved in the editor. Clone the currently active theme to a new theme including all the changes from the editor. Overwrite the existing theme with the changes saved in the editor. Create a brand new theme from scratch and create a style variation based on the changes made in the global styles interface in the editor. These options are covered in the Streamline your block theme development with Create Block Theme tutorial, which you can find on learn.wordpress.org.

Create Block Theme also allows you to manage your fonts, either by adding Google fonts, or adding local fonts to a theme, which is what you’ll be learning in this video.

To manage your theme fonts in a new block theme development project, click on the Manage Theme Fonts menu item. The currently installed fonts will be listed on this page. These are the fonts that are defined in the block theme’s theme.json file. You can add two types of fonts, either fonts downloaded and installed from Google Fonts, or local fonts you have on your computer that you’ve downloaded from other font sources.

To add a Google Font, click on the Add Google Font button. Then, select a font from the drop down list. Once the font is selected, the potential font variants will be displayed along with a preview of the font. Most fonts only have one variant but some have more than one. Unless you need a specific variant for a specific reason, the regular variant should suffice. Select the variants you want to install by clicking on the box next to the variant. Then click Add Google Fonts to your theme. The font file will be downloaded and added to your theme and configured in the block themes theme that JSON file. If you look at the theme code in a code editor, you will see the font file is in the assets/fonts directory. And the JSON object for the new font is added to the fontFamilies array under typography. While editing global styles in the site editor, you should now see the font listed wherever fonts are selectable.

To add a local font file from your computer, click on the Add Local font option. Click on the Choose File button and browse to the font file located on your computer. You can upload font files with a ttf, woff, or woff2 extension

Check that the font face definition is correct and then click Upload local fonts to your theme. As before, the font file will be added to your theme and configured in the block theme’s theme.json file. If you look at the theme code, you will see that the font file is in the assets/fonts directory. And the JSON object for the new font is added to the fontFamilies array under typography. When editing the global styles in the site editor you should now also see this new font listed wherever fonts are selectable.

And that wraps up this tutorial on using Create Block Theme to manage fonts.

For more info on block theme development as well as the use of Create Block Theme, why not try part one of the developer’s guide to block themes on Learn WordPress.

Happy coding

Introduction

Hey there, and welcome to Learn WordPress.

Today you’re going to learn how to add fonts to your block theme using a handy plugin in the WordPress plugin repository called Create Block Theme.

After a short introduction to Create Block Theme, we will cover how to install it on your WordPress site, recap the theme creation features, and then see how it manages your fonts.

Create Block Theme

Create Block Theme works in conjunction with the Site editor to allow you to create and edit block themes right from the WordPress dashboard. 

Whether you are developing your new theme on top of a base theme or starting a new block theme from scratch, you will find Create Block Theme very useful. 

Installation

You can install Create Block Theme through the Plugins page of your WordPress installation. 

• First, navigate to the list of Plugins, 
• Then, click on the Add New button, 
• In the search box on the top right, search for Create Block Theme

This will search the WordPress.org plugins repository. 

Once the plugin is found, click on Install Now to install it. 

After it’s installed, click Activate it to activate it in your WordPress install.

Once activated, the Create Block Theme sub-menu item will appear under Appearance in the dashboard menu.

Alternatively, you can also search for Create Block Theme in the WordPress plugins directory at wordpress.org/plugins. To install it download the plugin zip file, and install it manually through the Add New plugin screen.

Usage

Once installed, Create Block Theme offers a series of options that streamline your block theme development process. You can:

• Export the currently active theme and all changes saved in the Editor
• Create a child theme of the active theme, based on the changes saved in the Editor
• Clone the currently active theme to a new theme, including all the changes from the Editor
• Overwrite the existing theme with the changes saved in the Editor
• Create a brand new theme from scratch
• And create a style variation, based on changes made in the Global Styles Interface.

These options are covered in the Streamline your Block Theme development with Create Block Theme tutorial, which you can find on Learn WordPress. 

Create Block theme also allows you to add Google fonts or local fonts to your theme, which is what you’ll be learning about in this video.

Manage Theme Fonts

To manage your theme fonts, click on the Manage theme fonts menu item. The currently installed fonts will be listed on this page. These are the fonts that are defined in the block theme’s theme.json file.

You can add two types of fonts, either fonts downloaded and installed from Google Fonts, or local fonts you have on your computer that you’ve downloaded from other font sources.

Add Google Font

To add a Google Font, click on the Add Google Font button. Then select a font from the dropdown list. 

Once a font is selected, the potential font variants will be displayed, along with a preview of the font. Most fonts only have one variant, but some have more than one.

Unless you need a specific variant for a specific reason, the “regular” variant should suffice. Select the variants you want to install by checking the box next to the variant.

Then click “Add google fonts to your theme”

The font file will be downloaded and added to your theme and configured in the block theme’s theme.json file.

If you look at the theme code, you will see the font file in the assets/fonts directory, and the JSON object for the new font added to the fontFamilies array under typography.

When editing Global Styles in the Site Editor, you should now see the font listed whenever fonts are selectable.

Add Local Font

To add a local font file from your computer, click on the Add Local Font option. Click on the Choose File button, and browse to the font file located on your computer. You can upload font files with .ttf, .woff, or .woff2 extensions.

Check that the font face definition is correct, and then click Upload local fonts to your theme.

The font file will be added to your theme and configured in the block theme’s theme.json file.

If you look at the theme code, you will see the font file in the assets/fonts directory, and the JSON object for the new font added to the fontFamilies array under typography.

When editing Global Styles in the Site Editor, you should now see the font listed whenever fonts are selectable.

And that wraps up this tutorial on using Create Block Theme to manage fonts. For more info on Block Theme development, as well as the use of Create Block Theme, try part 1 of the Developers Guide to Block themes on Learn WordPress.

Happy coding!