In this WordPress help article, I’ll be taking you step-by-step through the process of adding custom fonts to your WordPress Block Themes. This means you can add ANY fonts to ANY theme, such as adding Google Fonts to the Twenty Twenty Three theme.
I show you how to accomplish this task using the Create Block Theme plugin developed directly by the WordPress team of developers. This makes the plugin ultra light, high performance, and very easy to use with block themes.
With this method, you can either link to fonts (i.e. link to Google Fonts) or embed fonts locally on your site (for better site performance). Let’s get into it!
Video: Add Custom Fonts to WordPress
1. Install the “Create Block Theme” Plugin
For starters, you’ll want to log in to your WordPress admin area, which will take you to the Dashboard. From there, go to Plugins>Add New from the main navigation (red arrow in the above image).
Search for the “Create Block Theme” plugin using the search bar in the upper right corner (outlined in green in the above photo). Once the Create Block Theme plugin displays, click the “Install Now” button to install it to your site (red arrow).
Next, click the “Activate” button to activate the plugin.
2. Disable Security Plugin (Temporarily)
In order for the rest of this process to run smoothly, you’ll need to temporarily disable any security plugins you have installed that block users’ ability to edit themes or plugins.
In my particular case I am using the SG Security plugin (which comes with all WordPress websites hosted via Siteground – a host I highly recommend). I know for a fact that this plugin interferes with the process of adding custom fonts, so I’ll disable the setting that gets in the way.
In this case, I’ll navigate to the “Site Security” section of the SG Security plugin using the main navigation (red arrow in the above image).
Next, I’ll scroll down to the option labeled “Disable Themes & Plugins Editor” (highlighted in green in the above image). You’ll see a toggle to the right of this option – click the toggle to disable this feature (red arrow). You should see a “Success” message pop up in the right corner blue arrow).
With our security plugin temporarily disabled, we can move on to the next step of selecting and uploading the fonts we want to use on our site.
There are two options for using custom fonts in WordPress.
3. Select Custom Fonts for WordPress (Linked Google Fonts)
The first option is to link to fonts on a third-party site, Google Fonts. This option is simpler and takes less time to set up, but slows down your website’s page load speed. It also limits you to the fonts available from Google Fonts (although Google offers tons of great, free fonts). If you’re less tech-savvy and don’t mind using Google Fonts, I recommend this option.
For starters, navigate to “Appearance>Manage Theme Fonts” from the main navigation (red arrow in the above image).
In the “Manage Theme Fonts” work area, you’ll see all the default fonts currently installed in WordPress (highlighted in green in the above image). Your fonts are also listed along the right-hand side of the work area, along with the different variations of each font and file size for each font variation (outlined in blue).
To add a new font to your theme, click the “Add Google Font” button (red arrow).
Click the “Select Font” dropdown and search for the Google Font you’d like to add to your site (the fonts are in alphabetical order). If you’re not sure what each font looks like, I recommend browsing the Google Fonts website to explore fonts and test them out. Once you’ve found the font you want to use, select it from the dropdown (blue arrow).
You’ll now see a list of all the available variants you can install on your theme for that font. You can either check the box next to individual variants, or click the top checkbox (red arrow in the image above) to select all variants. You’ll see a list of your selected variants, along with their file size, over on the right-hand side of the screen. Once you’re ready, click “Add Google fonts to your theme” (green arrow).
You should now see a message at the top of the work area that the font has been installed to your theme (in this case to the Twenty-Twenty Three theme). You can then click the “Manage Fonts” link inside the success message box, or click the little back arrow (red arrow in the image above) to return to the “Manage Theme Fonts” work area.
You’ll now see your newly installed font family listed with the rest of your theme’s fonts (red arrow in the above image). You’ll also see your font family and all its associated font variations on the right-hand side of the work area (highlighted in green).
4. Embed Custom Fonts for WordPress (Local Fonts for Better SEO)
The second option for adding fonts to your WordPress website is to “embed” or “locally host” your fonts. In other words, your font files will be located inside the same web server that hosts your website.
The benefit to this method is that it doesn’t require retrieving fonts from a third-party domain. As a result, your fonts load faster and thus your webpage loads faster. Faster loading webpages is better for the user experience, which means it can help your site rank higher on search engines and get more traffic.
In other words, embedded fonts are better for SEO (search engine optimization).
While this method takes a couple extra steps, it’s still quite easy and uses the same plugin we installed earlier (Create Block Themes plugin).
To install your fonts locally, start by navigating to Appearance>Manage Theme Fonts from the main navigation (if you aren’t there already from the last step – blue arrow in the above image). Next, click the “Add Local Font” button in the top right corner of the work area (red arrow).
You’ll be taken to the “Local Fonts” area where you can select a file from your computer to upload to your theme. Beneath the “Choose File” button you’ll see a list of the supported font file formats. You can get these formats from any trusted font website, including Google Fonts.
Find & Download Your Font of Choice from Google Fonts
I’ll hop over to Google Fonts and will use the search bar (red arrow) to search for the font I want – in this case the “Catamaran” font. Once the font is listed in the results, I’ll click on it to view the font page (green arrow).
Next, I’ll click the “Download family” button to download this font and all its variations to my computer. You can scroll down on the font page if you want to see all available variations for this font.
Click “Save” to save the font zip file to your computer.
Unzip Your Font Folder to Access Font Files
Once the download has finished, click the arrow next to the finished download (red arrow) and click “Show in folder” (green arrow).
Right-click on the zip file in your file explorer and click “Extract All.”
A pop-up window will display, showing you where the fonts are being extracted (red arrow). You can change this location if you want, otherwise click the button labeled “Extract” (green arrow). This will unzip the folder and create a new file on your computer with all the unzipped font files. This folder should open automatically.
If you downloaded font files using Google Fonts, enter the folder labeled “static” to view all your font files. Otherwise, simply look for any files that are OTF, TTF, WOFF, or WOFF2 files.
Inside this “static” folder you’ll see a list of all the font variations we downloaded for the Catamaran font from Google Fonts. There are 9 variations total, and we can either upload all of them to our website or just the variations we want/need. Click on the folder location in the file explorer (green arrow), then right-click and select “Copy.”
Upload Your Custom Fonts to WordPress
Navigate back to WordPress where you have the “Local Fonts” work area open. Click the “Choose File” button (red arrow in the above image) to select your fonts. You can manually navigate to the location on your computer where your fonts are stored. Or, simply click on the address bar of the file explorer (blue arrow), delete the address that is currently there, then right-click and select “Paste” (green arrow). This will paste the address you copied in the previous step. Hit the enter key and you’ll be taken to the folder with your fonts.
You have to upload your font variations one at a time. For this example, I’ll simply upload the “Catamaran-Regular” font variation by clicking on it (green arrow), then clicking the “Open” button (red arrow).
You should now see information for the “FONT NAME,” “FONT STYLE,” and “FONT WEIGHT,” as well as a preview of the font on the right-hand side. Click “Upload font to your theme” (red arrow) to upload the font variation.
View Your Custom Theme Fonts
You should now see a success message at the top of the work area (outlined in green in the above image). Congrats – your custom font is now uploaded to your theme as a local font! You can continue to click “Choose File” and upload as many font variations as you want.
Once finished, click the “Manage Fonts” link inside the success message box or the back arrow (denoted by the red arrow) to return to the Manage Theme Fonts work area.
You’ll now see the new “Catamaran” font family listed with the rest of your theme’s font families (red arrow). Plus, you’ll see the font family and any variations you installed on the right-hand side of the Manage Theme Fonts window (highlighted in green).
5. Change Your Theme’s Fonts to Your Custom Fonts
Now that you have your new fonts installed, it’s time for the fun part!
To change your theme’s fonts to your custom fonts, navigate to the Site Editor by going to Appearance>Editor (red arrow in the above image).
Click anywhere inside the main content area (red arrow) of the Site Editor to bring up the controls.
In the Top Menu, click on the “Styles” icon (blue arrow). Then, click “Typography” (red arrow).
Under “Elements” you can change the font for the text, links, headings, or buttons. I’ll select the “Headings” option for this example.
You’ll now see a dropdown under “Typography” where you can select from any of your theme fonts (red arrow). You can see the “Neuton” and “Catamaran” fonts I added for this tutorial are listed here. I’ll select “Neuton” for my heading font.
Click the “Save” button in the top right corner to save your changes.
Click “Save” one more time (red arrow), and your custom font will now be saved for all the headings throughout your site!
Next, you can click the View>View Site link in the top right corner of the site editor (red arrows in the above photo) to see what your website looks like with your new font. Return to the Site Editor and repeat this process for any other elements whose font you want to customize.
To return to the WordPress Admin Area, click the logo in the top left corner of the site editor (green arrow), then click the logo again.
6. How to Delete Custom Fonts from WordPress
To delete any of your custom fonts, start by navigating back to Appearance>Manage Theme Fonts.
You can delete the entire font family by hovering your mouse over the right-hand side of the font family name and click the trash can icon that appears (blue arrow). Or, hover your mouse over individual font variations and click the trash icon (font variations are located inside the green highlighted area). You can also click the “Remove Font Family” link to delete any font family (purple arrow).
That’s it for this tutorial! If you liked it, you can check out my other WordPress Help Articles or enroll in my WordPress Masterclass on Udemy.
