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.
- From your dashboard, go to Plugins > Add New.
- In the Search plugins field, enter Create Block themes. It should be the first result. Hit the “Install Now” button.
- Click “Activate“.
- You’ll now have a new menu under the Appearance menu called Manage Theme Fonts. Click on it.
- 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.
- After following the step above, click the “Add Google Font” button.
- From the dropdown, select the font you want to add.
- Pick a font from the dropdown and you can preview what your fonts look like for headings, sentences, and paragraphs.
- 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.
- 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.
- You’ll now see a confirmation that your font has been loaded at the top of the page.
- 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.
- 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.
- On the next screen, click the “Browse” button and find the fonts on your computer.
- 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.
- You can preview what your fonts look like for headings, sentences, and paragraphs.
- Hit the “Upload font to your theme” button
- You’ll see confirmation at the top of the screen. Hit the “Manage Fonts” link to get back to the main screen.
- 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.
- From the main admin screen, go to Appearance > Editor.
- 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.
- Next, click the Typography menu.
- You’ll now see a list of elements. Click the element’s font you want to customize.
- 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!