There’s a bug in WordPress 6.5 that prohibits custom fonts from properly displaying on your website when using the Font Library feature.
This bug seems to occur if you have ever installed and used the legacy Custom Block Theme plugin on your website to display custom fonts, which was the de facto method for uploading and displaying custom fonts prior to the introduction of WordPress 6.5’s Font Library feature.
What is the Font Library Feature
As you likely already know, the Font Library feature allows you to upload custom fonts from your computer or link directly to Google Fonts from inside the Site Editor. This feature is only available for Block Themes, which utilize WordPress’s Gutenberg Block Editor to design webpages.
Fixing Custom Fonts Not Displaying in WordPress 6.5
To resolve this issue, you’ll need to first ensure the latest version of the Custom Block Theme plugin is installed. You’ll also need to navigate to the Styles section of the Site Editor to edit your theme’s current style. Finally, you’ll need to properly save your custom fonts to your theme.
Step 1: Install Create Block Theme Plugin or Update to the Latest Version
Because WordPress 6.5 introduced the ability to add custom fonts via the Font Library feature, they removed this capability from the Create Block Theme plugin. However, if you’ve ever used the legacy version of this plugin to display custom fonts on your website, you’ll still need the Create Block Themes plugin installed on your WordPress site to have the Font Library properly display custom fonts.
So, navigate to the Plugins section of your WP Admin area. If you already have this plugin installed, make sure it’s updated to the latest version. If you deleted it, go to “Add New Plugin” to add a new plugin.
Then, search for “Create Block Theme” using the search bar in the upper right corner, and click “Install Now” next to the Create Block theme plugin that displays in the search results.
Click “Activate” to activate the plugin after it’s been installed.
Step 2: Use Font Library to Add Custom Fonts to Your Site
Now that the latest version of the Create Block Theme plugin is installed and activated, you’ll need to navigate to the Site Editor to add custom fonts to your site (if you haven’t already). If you’ve already added custom fonts, skip to the next step.
First, go to Appearance>Editor. This will take you to the Site Editor.
Click on the right side of the screen, which displays your active website (usually the active homepage).
You’ll now be in what’s known as the Block Editor. Across the top of the editor is the Block Toolbar. In the top right corner of the Block Toolbar, you’ll see an icon called “Styles” (it has a circular icon that’s half black, half white). Click this icon to open the Styles settings sidebar.
Next, click “Typography” to access the typography settings.
To the right of the subheading “Fonts” you’ll see a small sliders icon labeled “Manage fonts.” Click this icon to access the Font Library feature (this will only be available in WordPress 6.5 or newer).
Here, you can use the “Upload” tab to install third-party fonts from your computer, or use the “Install Fonts” tab to link to Google Fonts. Once you’ve uploaded or linked to your fonts, you can close out of this window.
Step 3: Save Your Fonts to Your Current Theme
Now that you have your custom fonts added to your site, you should just be able to click “Update” and the fonts will now be displayed on your site…. right?
Not exactly. If you’ve ever used the legacy Create Block Theme plugin prior to updating to WordPress 6.5, you have to complete an extra step to have your changes take effect.
In the Block Toolbar along the top of the Block Editor, you’ll see a wrench icon labeled “Create Block Theme.” Click this icon.
Note: if you did not install or update to the latest version of the Create Block Theme plugin, and/or you are not using WordPress 6.5 or newer, this icon will not display in the toolbar of the Block Editor.
Next, click “Save Changes to Theme.”
Make sure “Save Fonts” is checked, then click “Save Changes.”
A success message will now display at the top of the editor that states the editor will now reload. Click OK to confirm. The editor will now reload.
You should now see the correct custom font displayed in your content inside the editor window (if you look closely at the main title in the photo above versus the previous photo, you’ll see the font has changed/updated). You can also click “View Page” to see a live preview of your site, which should now properly display the third-party fonts.
That’s it for this tutorial! If you found it useful, you can check out my other WordPress help articles and video tutorials. You can also enroll in my WordPress Simplified course on Udemy.
