Select Uploaded Font in WordPress Block Editor

[Robert Staddon]

Hello there, when I upload a new font using your plugin, I would expect to be able to select it in the Font list in the default WordPress block editor. After uploading a font, if I type a paragraph into a new post and then go to the block settings on the right sidebar of the editor there is a “Typography” area under the “Design” tab. I click the three-dot menu and select “Font”. However, the fonts that I upload with “Use Any Font” do not appear here. Can you add this default WordPress editor compatibility?

[Dinesh]

Hi Robert,

Our plugin needs theme.json file in your theme so that we can rewrite it after fonts has been uploaded via our plugin. We then write the font definations in theme.json. After that font uploaded via our plugin will be visible in wordpress default editor. As of now, we can only send font to block editor via it.

Also, you can assign font to block editor using class. For that you can check the video here. https://www.youtube.com/watch?v=de3BoxAINuE

Thanks

[Robert Staddon]

Thank you for the reply. This is good to hear! Would it be possible to create a documentation article or YouTube video on how to upload a font using your plugin and assign it to the block editor using theme.json?

[Dinesh]

Hi Robert,

Theme.json comes with supported themes only. So its upto the developer to include it. So if theme.json is included the the theme, our plugin auto rewrites it to add the font that were added via our plugin.

Thanks

[Robert Staddon]

I created a theme.json file and dropped it in the root folder of my child theme. For starters, I just used it to add a couple of colors to the color palette.

I know it’s working because these two new colors are appearing in the Block Editor under “Theme”:

Then I went to your plugin and uploaded a new font:

It did not automatically update my theme.json file. What do I do next?

[Dinesh]

Hi Robert,

It needs to have one of the Font families as well. And our plugin can rewrite that.

Exercise: Creating theme.json

After that, you need to Save Settings from our plugin. Because our css / font definatinons re-writting are only tirggered when new font is uploaded or setings are saved.

Thanks

[Robert Staddon]

Hello Dinesh,

Thank you for the helpful response. So I went to my theme.json and pasted in some font families:

I know it’s working because I’m now seeing these new fonts in the WordPress block editor:

Then I went back to the “Use Any Font” plugin (current version 6.3.07) and clicked “Save” on the “Settings” page. Unfortunatey, the theme.json file was not updated and the font did not appear in the WordPress editor.

So I went and deleted my Gallaudet font out of Use Any Font and re-uploaded it:

After uploading the font, I also re-saved the settings. Sadly, the “Use Any Font” plugin has still never updated my theme.json file and the font still is not appearing in the WordPress block editor. What gives?

[Dinesh]

Hi Robert,

May be theme.json is not properly setup up. To confirm on this, can you please activate default wordpress theme and Save the Settings in our plugin. Can you check if that works ?

Thanks

[Robert Staddon]

Hello Dinesh,

I’m sorry that the screenshot images did not appear in my earlier post. I know that the theme.json is working because I’m seeing the fonts defined in it in the WordPress block editor:

And you can see that the theme.json is valid:

Here’s how I’m uploading the Gallaudet font with your Use Any Font plugin:

So is there something besides adding a theme.json that is required for your plugin to work?
I don’t want to use the default WordPress theme and the new built-in font uploader that’s now bundled with WordPress block themes. The real strength of your plugin is working with page builders and other traditional themes. I’m using Divi. Do you need me to set up a test site so that you can see the issue in action?

[Dinesh]

Hi,

I am asking for test here to activate the default wordpress theme to make sure our plugin is able to write the theme.json file.

Thanks

[Robert Staddon]

Hello Dinesh,

I set up a test site and your plugin did add the font to theme.json (and thus to the block editor) when using the Twenty Twenty-Four theme!

So I looked in your “uaf_block_editor_functions.php” file and saw that the two requirements that you are using to add the code to the theme.json are “wp_is_block_theme()” and “wp_theme_has_theme_json()”. So it only works if a theme defines itself as a completely block-based theme, whether or not there is a json file present.

The problem is that very few themes right now are defining themselves as completely block-based themes. And many do not ever have plans to become a completely block-based theme. (And those that are probably wouldn’t need a “Use Any Font” plugin because they’d use the new core font manager for block-based themes in the new core template editor). However, every single WordPress site without something like the Classic Editor plugin installed is going to be able to use blocks. For example, all the page builders give you an option about whether you want to build a page or post with their page builder or the default block editor. For me, I usually build out the fancy pages and templates with a page builder like Divi or Elementor or Breakdance but leave the client to simply create their blog posts and/or add their LearnDash courses in the default block editor. And because of the “wp_is_block_theme()” requirement, these blocks don’t have access to fonts uploaded through the “Use Any Font” plugin.

Would you consider removing the “wp_is_block_theme()” as a requirement for adding a font to the default block editor and just add the font family if the theme json exists? Or perhaps create a setting that would allow this?

Thank you!

[Dinesh]

Hi Robert,

I will work on this and try send new update next week. Might not be big deal to remove wp_is_block_theme(), but need to make sure the code run without any error for block based theme. Will remove, test and send the update.

Thanks

[Robert Staddon]

Thank you, Dinesh!

[Dinesh]

Hi Robert,

I have updated the plugin to 6.3.08. Now, even if the theme doesn’t have theme.json file. Our plugin creates and writes it.

Thanks

[Robert Staddon]

It works! Thank you!

[Author]

Posts