Documentation

Home » Documentation » Theme Help » Adding new fonts to your block theme

Adding new fonts to your block theme

In order to add new fonts to your theme, you’ll need to start by downloading and installing the Create Block Themes plugin.

Adding a new block theme font - Add new plugin menu
  1. From your dashboard, go to Plugins > Add New.
Adding a new block theme font - Create Block Theme plugin
  1. In the Search plugins field, enter Create Block themes. It should be the first result. Hit the “Install Now” button.
Adding a new block theme font - Activate Create Block Theme plugin
  1. Click “Activate“.
Adding a new block theme font - Manage Theme Fonts menu in WordPress admin
  1. You’ll now have a new menu under the Appearance menu called Manage Theme Fonts. Click on it.
Adding a new block theme font - Manage Theme Fonts admin page
  1. From this page, you’ll see all the fonts available in your theme.

Adding Google Fonts

Google offers an incredible selection of free fonts for anyone to download and use. Here’s how to add them to your theme.

Make sure to add the Create Block Theme plugin first. Details are in the steps above.

Adding a new block theme font - Adding a Google Font button highlighted
  1. After following the step above, click the “Add Google Font” button.
Adding a new block theme font - Fonts dropdown list
  1. From the dropdown, select the font you want to add.
Preview what your Google font will look like before adding it to your theme.
  1. Pick a font from the dropdown and you can preview what your fonts look like for headings, sentences, and paragraphs.
Adding a new block theme font - Picking font variants for Google fonts
  1. Once you’ve decided on a font, select the variations (bold, italic, etc) you’ll need. Keep in mind not all fonts offer the same number of variations.
  2. Click the “Add Google fonts to your theme” button.

⭐ Pro Tip

Be mindful of how many fonts and font variations you add. Too many can slow your site down. A good 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 - Google fonts added confirmation message
  1. You’ll now see a confirmation that your font has been loaded at the top of the page.
Adding a new block theme font - New fonts added
  1. Your new fonts are now visible on the main Manage Theme Fonts screen.

Adding your own local fonts

If you want to use specific fonts that you have locally on your computer, the steps are similar to the ones listed above, but with a few differences.

Adding a new block theme font - New local font
  1. After downloading and activating the Create Block Theme plugin outlined in the first steps above, go to the Manage Theme Fonts menu which can be found under Appearance, and click the “Add Local Font” button.
Adding a new block theme font - browse your computer for new fonts to add
  1. On the next screen, click the “Browse” button and find the fonts on your computer.
  1. Find the font file you want to upload from your computer.

⭐ 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.

Adding a new block theme font - review your new font
  1. You can preview what your fonts look like for headings, sentences, and paragraphs.
Adding a new block theme font - upload your font
  1. Hit the “Upload font to your theme” button
Adding a new block theme font - confirmation message
  1. You’ll see confirmation at the top of the screen. Hit the “Manage Fonts” link to get back to the main screen.
Mange theme fonts page with newly uploaded font showing.
  1. Your new font is are now visible on the main Manage Theme Fonts screen.

Using your newly added fonts

In the steps above, we showed you how to add new fonts to your theme. In the next steps, you’ll see how you can assign the fonts to your theme’s elements.

Assigning fonts in your theme - Admin menu
  1. From the main admin screen, go to Appearance > Editor.
Assigning fonts in your theme - site editor Styles menu highlighted
  1. Once in the editor, select the homepage by clicking on the page. You’ll now be in edit mode. Then in the top-right of the screen, click on the Styles icon.
Assigning fonts in your theme - site editor Typography menu highlighted
  1. Next, click the Typography menu.
Assigning fonts in your theme - site editor list of elements for font changes
  1. You’ll now see a list of elements. Click the element’s font you want to customize.
Assigning fonts in your theme - new font selected
  1. Edit the setting as you wish, hit “Save“, and you’re done!

Our docs are still a work in progress!

We’re adding new things weekly. Need to know how to do something and don’t see it here? Send us a message. We’ll be happy to walk through it!