How to change your theme’s font: Block theme version

When I start a new project, whether it’s creating a theme or a client site, one of the first things I decide on is which font to use. A little while back, I wrote a tutorial on how to change your theme’s fonts. That tutorial covered classic themes. Today I’ll walk you through the steps to add and change your fonts with a block theme. With the help of a plugin, you’ll be pleasantly surprised at how quick and easy it is. Let’s begin!

With a little help from a plugin

The first thing you’ll want to do is download and activate the Create Block Themes plugin. It was originally released by to help developers build block themes but they’ve since added the really handy feature of adding fonts.

Adding a new block theme font - Create Block Theme plugin

From your dashboard, go to Plugins > Add New. In the Search plugins field in the top-right of your screen, type Create Block themes. It should be the first result. Hit the “Install Now” button and then “Activate“.

You’ll now have two new menus under the Appearance menu. One called Create Block Theme and the other Manage Theme Fonts. We’ll start by heading over the Create Block Theme.

Creating a Child theme

In this step, we’ll create a new child theme. This will avoid us losing the changes we’re about to do when your theme updates.

Under Appearance > Create Block Theme.

Adding New Fonts

Next we’ll add some fonts.

Adding a new block theme font - Manage Theme Fonts menu in WordPress admin

Head to Appearance > Manage Theme Fonts.

Adding a new block theme font - Manage Theme Fonts admin page

On this screen, you can see all the fonts currently available in your block theme. In the example above I have Manrope and Lora available.

You now have two choices. You can either add a new Google font or upload your own file locally from your computer.

If you’re uploading your own font, make sure you have the proper license. You should normally be able to see this in a license file that came with your font. If you don’t see a license file, I recommend checking the site you downloaded it from. They would have all the information on how you can use the font.

Adding Google Fonts

Google offers an incredible selection of free fonts for anyone to download and use for both personal and commercial use. Personally, this is one of my go-to sites when it comes to free and open-source fonts. Here’s how to add them to your theme.

Adding a new block theme font - Adding a Google Font button highlighted

Start by clicking the “Add Google Font” button.

On the next screen, you can pick from a very long list of fonts which font you want to add (it’s a good idea to research your font before this step). What’s great about this plugin is you can preview the fonts as headings, sentences, and paragraphs before installing them. Keep in mind what you’re looking at on this screen is just a preview of what the fonts will look like. Assigning the font to the elements is a different step I’ll cover further down.

Adding a new block theme font - Picking font variants for Google fonts and confirming.

Once you’ve decided on a font, select the variations (bold, italic, etc) you’ll need. It’s worth noting not all fonts offer the same number of variations. Now check off all the variations you want to add and hit the “Add Google fonts to your theme” button at the bottom. You’ll now see a confirmation at the top of the page.

⭐ Pro Tip

Be mindful of how many fonts and font variations you add. Too many can slow down your site. A good design rule of thumb is to limit things to two or, on occasion, three font families and load only the variations (regular, bold, bold italic, etc.) you think you’ll actually use.

Adding a new block theme font - New fonts added

And voilà, the hard part is done.

Adding local fonts

The steps for adding a font from your computer are similar to the ones we just went through, with some minor differences.

Adding a new block theme font - New local font

This time we’ll click the “Add Local Font” button from the Manage Theme Fonts screen.

Adding a new block theme font - browse your computer for new fonts to add

On the next screen, click the “Browse” button and find the fonts on your computer. Then select it and click “Open“.

⭐ Pro Tip

Although several file formats are supported (.otf, .ttf, .woff, .woff2) the best one for the web is typically considered to be WOFF (Web Open Font Format) or its newer version, WOFF2 mainly due to its smaller file size and browser support. If don’t have a WOFF or WOFF2 for your font you can use a site like Cloudconvert to convert them.

Adding a new block theme font - review your new font

As with the Google font example, you’ll now be able to preview the fonts file as headings, sentences, and paragraphs before uploading them.

If you have several variations to upload, each will have its own file. After you’ve hit “Open” and your browser window closes, the information under Font face definition for this font file: will get auto-populated. You’ll most likely not need to change anything under FONT WEIGHT and FONT WEIGHT, but if you want all your variations to show up as one font, you’ll need to make sure your FONT NAME all have the exact same name. So if your font file is called Lato-Black.woff2 under FONT NAME, you’ll see Lato Black. Simply change it to Lato.

Next, hit the “Upload font to your theme” button. You’ll get a confirmation at the top of the screen for each. Once you’ve uploaded all your variations, go back to the main Manage Theme Fonts page using the Manage Fonts link at the top.

Mange theme fonts page with newly uploaded font showing.

And once again you’ll see your newly uploaded font.

Using your newly added fonts

Now that we’ve uploaded some new fonts, it’s time to actually use them. From the main admin screen head over to the editor: Appearance > Editor.

Assigning fonts in your theme - site editor Styles menu highlighted

Once in the editor, select the template that comes up, which is normally the homepage, by clicking inside the page. You’ll now be in edit mode. From the top-right of the screen click on the Styles icon.

Assigning fonts in your theme - site editor Typography menu highlighted

You’ll see a few links here. The one we want is the Typography menu.

Assigning fonts in your theme - site editor list of elements for font changes

And finally, this is where the magic happens. The list of elements you can modify appears in a new list. Simply click the element you want to customize.

Assigning fonts in your theme - new font selected

A new window pops up and you’ll see your newly added fonts from the drop-down. Pick your font and hit save. If the template you are in happens to be using that element, you’ll be able to see the newly assigned font.

If you don’t need to add any more fonts, you can safely deactivate and delete the Create Block Themes plugin now. All your fonts are safely tucked away in your child theme. If you like exploring new designs for your site and want to experiment with other fonts, just follow the above steps to add a new font.

What the future holds

Because WordPress is always changing and improving, these steps are what works now but there is talk about being able to add your fonts without the need for a plugin in future releases. Let’s hope this feature lands sooner rather than later.

You Might Also Enjoy