Brian Alexander 6:38 pm on October 3, 2023  

Help Test the Font Library

Update: This one is the old post. Please check this one for the latest updated post: Understanding and Testing Font Library Feature with Block Editor Theme.

Released in Gutenberg 16.7, the Font Library is a major feature that was originally planned for sync into WordPress Core for the 6.4 release. It’s now slated for WordPress 6.5 and we need your feedback to help ensure it’s ready for the future.

Test Setup

Local Environment

If you have a local development environment running WordPress 6.3.x, just install Gutenberg 16.7 to get started.

Another option is to test with wp-now (requires Node.js), which you can launch from a command line. After following the wp-now setup guide, you will be able to:

  • In your terminal run: npx @wp-now/wp-now start
  • Navigate to Plugins > Add New PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party and install and activate GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/.

WordPress Playground

To test only using your browser (no installation required), try out Playground. These links open WordPress directly in your browser and automatically install Gutenberg so that you can start testing right away.

(Playground limitation: Due to browser network security policies, you will be unable to test installation of Google fonts. However, you can test uploaded fonts.)

Things to Test 🧪

Here are some suggestions for functionality to test, but you are encouraged to experiment beyond these:

  • Upload fonts using the upload dialog and drag-and-drop.
  • Install fonts from Google Fonts using the Install Fonts tab.
  • Verify that uploaded/installed font assets are stored in your site’s /wp-content/fonts/ directory.
  • Activate/deactivate individual font variants.
  • Compare active fonts with the list on the Styles > Typography sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme..
  • Assign custom fonts to elements (like text or headings) on the Styles > Typography sidebar.
  • Assign custom fonts to specific blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. types (like buttons) in Styles > Blocks.
  • Check how the fonts appear on your site’s frontend.
  • Delete an uploaded font family, and verify that the font assets are removed from /wp-content/fonts/.

Note that the Font Library currently only supports block themes, as it is only accessible through the site editor (Appearance > Editor).

Key Known Issues

This is a short list of common issues that will be updated as more testing reports are gathered.

  1. Font Library: Uploaded fonts do not always display correctly until after page refresh #55018
  2. Fonts: theme font family missing when editing individual blocks #55011
  3. Fonts: Switching style variations unchecks active fonts #54985
  4. Font Library: “update” button greyed out after uploading a new font #54881
  5. Font Library: Some installed Google fonts don’t display in editor or frontend #54706

Reporting Issues

If you find a bug that isn’t listed above, please make sure to check the Font Library issues list in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ before filing a new one. After checking, new bugs can be filed here.

Props @annezazu and @rmartinezduque for contributions and review of this post.