An in-depth analysis of the new features of WordPress 6.5: Introduction to the font library

WordPress 6.5 adds the Font Library feature, which allows users to manage fonts directly in the editor. In addition, it offers a range of APIs, which means developers have more flexibility to control and tweak this feature, or even disable it.

collection of fonts

A font set is a collection of fonts that you can add to your website through the editor. In thetheme.jsonThese font families are listed asfontFamilyProject. By default, in WordPress 6.5, users have the option to add a set of fonts from Google. In order to be GDPR compliant, these font files are downloaded to your WordPress server when installing Google fonts.

Once a font collection has been registered, the user will be able to see it in the editor's Font Library screen. Here the user can install and start using the fonts in the collection.

Add font set

You can use thewp_register_font_collection()function to add a new set of fonts. The process involves defining the font family and a list of them in PHP or JSON format, and then passing this information to the function as part of an array.

Here is an example showing how to add a font collection in PHP:

$font_families = [

array(

'font_family_settings' => (

array (

'fontFamily' => 'Open Sans, sans-serif',

'slug' => 'open-sans',



'fontFace' => (

array (

'fontFamily' => 'Open Sans',

'fontStyle' => 'normal',



'src' => 'https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0C4iY1M2xLER.woff2'

),

array (

'fontFamily' => 'Open Sans',

'fontStyle' => 'italic',



'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',



'fontFace' => (

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',



)

),

'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, 'font_families' => _x( 'A collection of my favorite fonts.



).

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

Note that the font collection array ofnamerespond in singingdescriptionfields need to support multilingual translation, you can do this by using the_x()function to wrap this text to accomplish this. Typically, the names of font families are not translated. For more information, check out discussion #60509.

in the font collectionfont_familiesFields can specify fonts using either a local path or a remote URL pointing to a JSON file.

Delete font set

It is possible to usewp_unregister_font_collection()function disables the font collection. This is an example of disabling the default font collection:

add_action( 'init', function() {

wp_unregister_font_collection( 'default-font-collection' );

} );

Installation and activation of fonts

In WordPress, you can get a list of all of the features that are available through thetheme.jsonSettings to configure fonts. When you "install" a font to your site, its settings are saved to a database so that any theme can use the font.

"Activating" the font means that it will be added to the theme's global style settings. This way, the new font can be used in the overall styling of the site as well as in the design of individual blocks.

If you change to a new theme, you need to reactivate the previously installed fonts, this ensures that the global styles of the new theme will also be updated. If you reset the theme's global styles, all previously installed fonts will be deactivated, but will remain on the site and you can reactivate them at any time.

Also, the font library allows you to deactivate the fonts that come with the theme if you don't need them, which can help improve the loading speed of your website.

Customize the font upload directory

By default, uploaded fonts are saved to thewp-content/fontsfolder. However, you can use thefont_dirFilter to change this save location, set a different directory according to your needs. If your settings don't allow changes to thewp-contentdirectory, thenwp-content/uploads/fontswill be used as an alternate directory.

You can usewp_get_font_dir()function to find out the exact location of the font upload directory.

The following example changes the fonts directory to the "Uploads" directory in WordPress (usually thewp-content/uploads):

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 ); // Generate the URL for the fonts directory from the font dir. $fonts_dir = $uploads_basedir .

$defaults['path'] = $fonts_dir;

$defaults['url'] = $fonts_url;

return $defaults;

}

add_filter( 'font_dir', 'alter_wp_fonts_dir' );

When you change the upload location of your fonts, make sure that the folder you choose actually exists and has the correct read and write permissions.

just aswp-content/uploadsfolder is the same, the folder set for font uploads will not be affected by thewp_is_file_mod_allowedmaybeDISALLOW_FILE_MODSsettings, which means that these settings will not prevent fonts from being uploaded.

How to disable font library

The font library is accessible by default through the editor.

Disable User Interface

Filters can be used to disable UI custom editor settings:

function disable_font_library_ui( $editor_settings ) {

$editor_settings['fontLibraryEnabled'] = false;

return $editor_settings;

}

add_filter( 'block_editor_settings_all', 'disable_font_library_ui' );

Disabling the REST API

ought tounregister_post_type()function can be used to remove post types associated with a font library and by extending the REST API:

add_action( 'init', function() {

unregister_post_type( 'wp_font_family' );

unregister_post_type( 'wp_font_face' ).

} );

Doing so allows the plugin to turn off the functionality of the font library, but at the same time retain the interface to manage the fonts provided by the current theme.

New REST API

Three new REST API endpoints have been added to the Font Library feature:

• wp/v2/font-collections: Used to get a list of predefined font families, a.k.a. "collections".
• wp/v2/font-families: Used to get information about parent font families, which usually contain one or more individual fonts.
• wp/v2/font-families//font-faces: Used to get detailed information about each font in a font family.