Back to Community
Home / Community / Theme → Twenty twenty-three

How to Add Custom Fonts to the Twenty Twenty-Three Theme

19 threads Sep 9, 2025 Theme → Twenty twenty-three

Content

Adding a custom font, such as one from Google Fonts or Adobe Fonts, is a common request for users of the modern Twenty Twenty-Three WordPress theme. Unlike classic themes, Twenty Twenty-Three is a block theme that relies on a theme.json file for configuration instead of a traditional functions.php file. This fundamental shift in how themes are built can make tasks like enqueueing a font in the block editor seem confusing at first.

This guide will walk you through the most common and effective methods for adding custom fonts to your site.

Why This Can Be Tricky

Users often run into a few specific issues when trying to add fonts:

  • Editor vs. Frontend Mismatch: The font displays correctly on the live site but not in the block editor.
  • Child Theme Pathing: Fonts added to a child theme's folder are not being found, often resulting in 404 errors, because the system may still be looking for them in the parent theme's directory.
  • Font Library Not Available: The built-in Font Library feature, which simplifies this process, was not part of the core WordPress software until more recent versions.

Recommended Solution: Use a Plugin

The simplest and most supported method for most users is to use a dedicated plugin. The Create Block Theme plugin is frequently recommended in the community for this exact purpose.

Steps to Add a Font with the Create Block Theme Plugin:

  1. Install and activate the Create Block Theme plugin.
  2. Navigate to Appearance → Manage Theme Fonts in your WordPress dashboard.
  3. Click on "Add Google Font" or "Add Local Font".
  4. Follow the plugin's instructions to select and upload your desired font. For Google Fonts, you can search and select from the available list. For local fonts, you will upload the font files (e.g., .woff2).
  5. Once added, your new font will appear in the block editor's typography dropdown menus, allowing you to apply it globally or to specific blocks.

This plugin handles the underlying configuration of the theme.json file and font enqueuing for you, preventing common pathing errors and ensuring the font is available in both the editor and the frontend.

Alternative Method: Manual Configuration via Child Theme

For developers or users who prefer a code-based approach, manually adding a font through a child theme is an option. However, this method is more technical and prone to the pathing issues mentioned in the support threads.

The general process involves:

  1. Creating a child theme for Twenty Twenty-Three.
  2. Uploading your font files to a directory within the child theme, such as /assets/fonts/.
  3. Adding a new font face definition to the theme.json file of your child theme.
  4. Ensuring the file paths in theme.json are correctly referenced.

Important Note: As seen in multiple threads, a common pitfall of this method is that the path to the font file must be absolutely correct. Using a relative path like "file:./assets/fonts/my-font.woff2" can sometimes fail in child themes. You may need to use a filter or ensure your child theme's theme.json is structured perfectly to override the parent settings.

Fixing the Editor Preview (Adobe Fonts)

If you are using Adobe Fonts and the font only shows on the frontend, you need to enqueue the Adobe Fonts stylesheet in the block editor. Since Twenty Twenty-Three lacks a functions.php, you must add this code to a must-use plugin or a functionality plugin.

/**
 * Show Adobe font in editor
 */
add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_style( 'adobe-fonts', 'Your Adobe Webproject URL here' );
} );

Conclusion

For the vast majority of users looking to add custom fonts to Twenty Twenty-Three, the Create Block Theme plugin is the most reliable and straightforward solution. It abstracts the complex configuration and avoids the common pathing and enqueuing problems associated with manual methods.

If you encounter issues where fonts disappear after a WordPress update, it is often due to changes in how fonts are handled in core. Re-adding the font using the current recommended method (like the Font Library in WordPress 6.5+) is usually the best course of action.

Related Support Threads Support