Krupa Nanda 6:42 am on March 23, 2024  

Understanding and Testing Font Library Feature with block editor theme

Font Library in WordPress 6.5 allows users to opt-in to a collection listing for Google Fonts. To comply with GDPR, installing a Google Font uploads the file to the site. When a Font Collection is registered, it will appear in the Font Library UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. in the editor. From here, users can install and activate fonts from the collection.

Before we start testing, we need to first prepare the test environment.

Test Setup

Local Environment

If you have a local development environment running WordPress 6.5 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/

So these are the possible areas which we should consider testing. Later part of this post explains some of them with details along with step by step instructions.

Let’s check on how we can achieve this.

When you go to the Dashboard -> themes -> editor -> Choose the component (Navigation, Templates, Patterns, Style etc)-> site icon. 


Here, click on the style icon, and it will open up an option for typography. This shows us the fonts.


Now, once you click on this icon, you will get a font manager option here. And with the help of it one can install, upload, activate/deactivate, delete the fonts.


In the font manager you can see what fonts you have and look at the variants from the Library tab.


Here, on the Upload tab you can upload fonts if you have already uploaded some, and it tells you the formats that are acceptable. 


And on the Install Fonts tab you can install Google Fonts.


These are the main areas of the Font Library. Now, let’s go into the details on how we can test this from various aspects. 

1. Font Collections: Editor View/Admin 

Test Scenario: Verify that Font Collections are correctly displayed in the Font Library UI and can be installed and activated by the user.

Steps to Test:

  1. Log in to the site dashboard as an administrator.
  2. Navigate to a post or page editor. 
  3. Locate the Font Library UI section.
  4. Click on the Font Manager Icon.
  5. Try installing and activating fonts from the available Font Collection.
  6. Ensure that the font appears in Typography after the installation, and the user should be able to use it; the changes should be reflected based on selected fonts in the Editor and on the frontend.
  7. Ensure that search and categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. filters are working properly.

2. Adding and Removing Font Collections Programmatically

Test Scenario: Ensure that Font Collections can be added and removed programmatically using the provided functions.

Steps to Test:

  1.  Try avoiding the theme’s function.php file. Instead, create a custom plugin with a given code snippet.
  2.   Use wp_register_font_collection() to add a new Font Collection.
  3.   Verify that the newly added collection appears in the Font Library UI.
  4.   Use wp_unregister_font_collection() to remove a Font Collection.
  5.   Confirm that the removed collection is no longer available in the Font Library UI and is gone from the fonts folder (by default, it is /wp-content/fonts/).

We can add a list of font families with their font faces in either PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php. or JSONJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. format as part of the Font Collection array.

The JSON format for the font_families field can be a local path or a remote URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org that points to the JSON file. Please walk through the code shared below when using PHP to add Font Collection.

$font_families = [
   array(
       'font_family_settings' => (
           array (
               'fontFamily' => 'Open Sans, sans-serif',
               'slug'       => 'open-sans',
               'name'       => 'Open Sans',
               'fontFace'   => array (
                   array (
                           'fontFamily' => 'Open Sans',
                           'fontStyle'  => 'normal',
                           'fontWeight' => '300',
                           'src'        => 'https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0C4iY1M2xLER.woff2',
                   ),
                   array (
                           'fontFamily' => 'Open Sans',
                           'fontStyle'  => 'italic',
                           'fontWeight' => '400',
                           'src'        => 'https://fonts.gstatic.com/s/opensans/v40/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk8ZkaVIUwaERZjA.woff2'
                   ),
               ),
           )
       ),
       'categories' => [ 'sans-serif' ],
   ),
   array(
       'font_family_settings' => (
           array (
               'fontFamily' => 'Monoton, system-ui',
               'slug'       => 'monoton',
               'name'       => 'Monoton',
               'fontFace'   => array (
                   array (
                           'fontFamily' => 'Monoton',
                           'fontStyle'  => 'normal',
                           'fontWeight' => '400',
                           'src'        => 'https://fonts.gstatic.com/s/monoton/v19/5h1aiZUrOngCibe4fkPBQ2S7FU8.woff2',
                           'preview'    => 'https://s.w.org/images/fonts/17.7/previews/monoton/monoton-400-normal.svg'
                   ),
               ),
           )
       ),
       'categories' => [ 'display' ],
   ),
   array(
       'font_family_settings' => (
           array (
               'fontFamily' => 'Arial, Helvetica, Tahoma, Geneva, sans-serif',
               'slug'       => 'arial',
               'name'       => 'Arial',
           )
       ),
       'categories' => [ 'sans-serif' ],
   ),
];
  
$categories = [
   array(
   'name' => _x( 'Display', 'Font category name' ),
       'slug' => 'display',
   ),
   array(
       'name' => _x( 'Sans Serif', 'Font category name' ),
       'slug' => 'sans-serif',
   ),
];

$config = array (
   'name'          => _x( 'My font collection', 'Font collection name' ),
   'description'   => _x(  'A collection of my favorite fonts.', 'Font collection description' ),
   'font_families' => $font_families,
   'categories'    => $categories,
);

wp_register_font_collection ( 'my-font-collection', $config );

To remove the font collection, use the code shared below.

add_action( 'init', function() {
	wp_unregister_font_collection( 'default-font-collection' );
} );

3. Installing and Activating Fonts

Test Scenario: Validate the process of installing, activating, and deactivating fonts within the Font Library.

Steps to Test:

  1. Install a font from a Font Collection.
  2. Verify that the font settings are saved.
  3. Activate the installed font and check if it reflects in Global Styles.
  4. Switch to a new theme and ensure installed fonts can be reactivated.
  5.  Deactivate a font and confirm its removal from Global Styles.

4. Customizing Fonts Upload Directory location

Test Scenario: Test the customization of the fonts upload directory and ensure proper functionality.

Steps to Test:

  1. Modify the fonts upload directory using the font_dir filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output..
  2. Check if fonts are uploaded to the specified directory.
  3. Verify that wp_get_font_dir() returns the customized directory path.
  4. Ensure that the chosen directory has correct permissions for file operations.

For example, wp-content/uploads directory, the fonts upload directory will not adhere to wp_is_file_mod_allowed / DISALLOW_FILE_MODS to prevent font uploads. Alternatively, if we have no clarity on permissions, we can also create a new folder with the current set of permissions.

The example below changes the fonts directory to the WordPress “Uploads” directory (by default, this is /wp-content/uploads/)

Here is the code sample that helps in customizing the fonts. 

function alter_wp_fonts_dir( $defaults ) {
	$wp_upload_dir = wp_get_upload_dir();
	$uploads_basedir = $wp_upload_dir['basedir'];
	$uploads_baseurl = $wp_upload_dir['baseurl'];

	$fonts_dir = $uploads_basedir . '/fonts';
	// Generate the URL for the fonts directory from the font dir.
	$fonts_url = str_replace( $uploads_basedir, $uploads_baseurl, $fonts_dir );

	$defaults['path'] = $fonts_dir;
	$defaults['url']  = $fonts_url;

	return $defaults;
}
add_filter( 'font_dir', 'alter_wp_fonts_dir' );

5. Disabling the Font Library

Test Scenario: Verify that the Font Library can be disabled in terms of both UI and REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/..

Steps to Test (UI Disable):

  1. Use a filter to customize editor settings and disable the Font Library UI.
  2. Access the post or page editor and confirm the absence of Font Library features.

Use this code snippet shared below.

function disable_font_library_ui( $editor_settings ) {
  	 $editor_settings['fontLibraryEnabled'] = false;
  	 return $editor_settings;
}

add_filter( 'block_editor_settings_all', 'disable_font_library_ui' );

Steps to Test (REST API Disable):

  1. Use unregister_post_type() to remove Font Library-associated post types and REST API endpoints.
  2. Check if the Font Library functionality is completely disabled without affecting other editor features. This can verified by visiting the APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. Endpoint URL: /wp-json/wp/v2/font-families

Use this code snippet shared below.

add_action( 'init', function() {
  	 unregister_post_type( 'wp_font_family' );
  	 unregister_post_type( 'wp_font_face' );
} );

6. Testing New REST API Endpoints

Test Scenario: Validate the functionality of the new Font Library REST API endpoints.

Steps to Test:

  1. Use tools like Postman or cURL to make requests to wp/v2/font-collections, wp/v2/font-families, and wp/v2/font-families/<id>/font-faces endpoints.
  2.  Verify the responses for predefined font collections, font families, and font faces.
  3.  Ensure that the API endpoints follow RESTful conventions and return expected data structures. For more details, please check this ticket.

Additional Considerations:

  • Test cross-browser compatibility for Font Library UI including mobile browsers.
  • Test performance impact of installing multiple fonts and switching themes.
  • Verify that font-related functionalities align with WordPress coding standards and best practices.
  • Check for any potential security vulnerabilities related to Font Library operations.
  • Please refer to the related issue tickets for more updates.

By following these comprehensive testing steps, you can ensure a thorough evaluation of the Font Library feature in WordPress 6.5.

Resources for more Guide

Resources for more Guidehttps://www.youtube.com/watch?v=Pnx_nkB-O2E 
REST APIhttps://developer.wordpress.org/rest-api/reference/ 
Font Library Revised API Designhttps://github.com/WordPress/gutenberg/issues/57616 
Articlehttps://make.wordpress.org/core/2024/03/14/new-feature-font-library/ https://make.wordpress.org/test/2023/10/03/help-test-the-font-library/ 

How to report an issue

  1. Record or write down by steps how an issue can be reproduced.
  2. Use Test report plugin to collect all essential information about the site you are testing.
  3. Check if there is a related ticket in TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. and add your report to it or create a new one. In the case of the Font Library,  start the ticket’s summary with Font Library, the component will be Editor and before the 6.5 release version will be trunk.

A big thank you to @ankit-k-gupta @webtechpooja @oglekler and @vipuljnext for reviewing this post.