How to use the Font Library in Classic or Hybrid Themes

WordPress 6.5 introduced the Font Library feature, that allows you to add, manage, and remove fonts without having to write any code.

But by default this feature is only available for block themes.

In this article I’ll show you a workaround so that you can enable the Font Library for classic and hybrid themes.

Where can I find the Font Library?

The Font Library is part of the Styles panel in the Site Editor, under Typography:

It doesn’t have any other interface. So in order to use the feature, you need to enable the Site Editor.

Enabling the Site Editor

To enable the Site Editor, you need to have two things:

1. A block Index template, meaning a templates/index.html file.
2. A valid theme.json file, meaning it contains { "version": 2 }.

There is no filter or any other workaround here, those two files need to be in the theme.

Now the index.html file can be empty, but I like to put a paragraph in there to make it clear that this template is not used on the frontend:

<!-- wp:paragraph -->
<p>This template is not used on the frontend.</p>
<!-- /wp:paragraph -->Code language: HTML, XML (xml)

This is the theme.json, for easier copy-paste:

{
  "version": 2
}Code language: JSON / JSON with Comments (json)

Just adding these two files will enable the Editor screen under Appearance:

And now you can access the Site Editor:

This is great, however we now got a problem. The block index template is also used on the frontend:

Disabling the block index template on the frontend

The index.html file overrides any existing index.php file. Therefore you need to prevent WordPress from displaying this template on the frontend.

This code snippet does this:

function wpdc_disable_block_templates_on_frontend() {
	remove_theme_support( 'block-templates' );
}
add_action( 'template_redirect', 'wpdc_disable_block_templates_on_frontend' );Code language: PHP (php)

The template_redirect action fires at the start of the template loading process (see wp-includes/template-loader.php).

By removing support for block templates at this point, the frontend will not be affected.

This restores the PHP index template.

Using the Font Library

Now you can go ahead and use the Font Library in the same way as you would to in a block theme.

One issue you’ll be running into though is that since your index.html is empty, you won’t see a preview of any changes done through the interface.

But you can enable the Style Book inside of the Styles panel in the Site Editor:

This gives you an overview over all the common blocks, so that you can style them visually.

Careful when adding theme.json to classic themes

Be very careful when adding a theme.json file to an existing theme. Because it acts as a flag that changes various WordPress behaviors.

One example is that it changes the markup of certain blocks, chiefly the Group block. So if you have written CSS styles relying on the Classic Group block markup, those styles will break.

Therefore I recommend that you always include a minimal theme.json as explained above in every theme.

There’s no downside to having this file: everything will continue to work as you are used to from a Classic theme.

But the upside is that you can start using block theme features in the future without having to fear any breakage.

Conclusion

That’s all you need to do to get access to the Font Library, and any other Site Editor tools in a Classic or Hybrid theme.

If you like this article, subscribe to my newsletter below. I send out useful tips and tricks like this one every week.