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 WordPress.org to help developers build block themes but they’ve since added the really handy feature of adding fonts.
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.
Head to Appearance > Manage Theme Fonts.
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.
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.
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.
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.
This time we’ll click the “Add Local Font” button from the Manage Theme Fonts screen.
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.
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.
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.
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.
You’ll see a few links here. The one we want is the Typography menu.
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.
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.