Inconsistency when adding fonts to fontFamilies in wp_global_styles post

[domainsupport]

When fonts are added to the theme settings saved in a wp_global_styles post, they are processed differently by the FSE Global Styles editor than they are by script-loader.php

The FSE Global Styles looks to see if the fontFamilies node exists and if it does then the fonts there are used to populate the "Font Family" dropdown in Global Styles overriding and ignoring any fonts outlined in fontFamilies in the theme's theme.json

However, when the fonts are processed by /wp-includes/script-loader.php, the opposite happens ... the fonts in the wp_global_styles post are completely ignored and only the fonts in theme.json are added to wp-webfonts inline styles.

I would have expected this to be consistent and for the fonts in the wp_global_styles post to be processed and for the ones in theme.json to be ignored as per the behaviour in the FSE Global Styles editor?

Oliver

[SergeyBiryukov]

Related: #56078

[ironprogrammer]

Thank you for this report, @domainsupport!

Would you be able to provide some additional ​testing instructions to reproduce this issue?

[domainsupport]

Absolutely!

Testing Instructions

The easiest way to demonstrate this issue is to remove the theme's fonts set in theme.json by overriding the ['settings']['typography']['fontFamilies'] node in the wp_global_styles post as follows ...

Steps to Reproduce

1. Install WordPress with Twenty Twenty-Two theme as the active theme
2. Run the Full Site Editor which will make sure the wp_global_styles post has been created in the database
3. Go to "Styles - Typography - Text" in the Full Site Editor and confirm that both "System Font" and "Source Serif Pro" are in the "Font Family" dropdown
4. Set ['settings']['typography']['fontFamilies'] node in the wp_global_styles post in the database to a blank array with this code ...

<?php
add_action('wp_loaded', 'set_fontfamilies_theme_data');

function set_fontfamilies_theme_data() {

    if (method_exists('WP_Theme_JSON_Resolver', 'get_user_data_from_wp_global_styles')) {

        $user_cpt = WP_Theme_JSON_Resolver::get_user_data_from_wp_global_styles(wp_get_theme());

        if (array_key_exists('post_content', $user_cpt)) {

            $decoded_data = json_decode($user_cpt['post_content'], true);

            if (
                !isset($decoded_data['settings']['typography']['fontFamilies']) ||
                (isset($decoded_data['settings']['typography']['fontFamilies']) && $decoded_data['settings']['typography']['fontFamilies'])
            ) {

                if (isset($decoded_data['settings']['typography']['fontFamilies'])) {

                    $decoded_data['settings']['typography']['fontFamilies'] = array();

                } else {

                    if (!isset($decoded_data['settings'])) {

                        $decoded_data['settings'] = array();

                    }

                    if (!isset($decoded_data['settings']['typography'])) {

                        $decoded_data['settings']['typography'] = array();

                    }

                    if (!isset($decoded_data['settings']['typography']['fontFamilies'])) {

                        $decoded_data['settings']['typography']['fontFamilies'] = array();

                    }

                }

                if (isset($user_cpt['ID'])) {

                    wp_update_post(wp_slash(array(
                        'ID' => $user_cpt['ID'],
                        'post_content' => wp_json_encode($decoded_data)
                    )));

                }

            }

        }

    }

}

5. Go to "Styles - Typography - Text" in the Full Site Editor and confirm that the "Font Family" dropdown is no longer present (because the fonts have now been overridden by the empty ['settings']['typography']['fontFamilies'] node in the wp_global_styles post
6. Visit the home page of your site and look in the console sources for fonts that have been loaded.
7. You will see that /wp-content/themes/twentytwentytwo/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2 has been loaded 🐞

Expected Results

When testing a patch to validate it works as expected:

• ✅ If a font exists in theme.json but doesn't exist in wp_global_styles post and ['settings']['typography']['fontFamilies'] node exists in the wp_global_styles post then the font should not be loaded on the front end

When reproducing a bug:

• ❌ If a font exists in theme.json but doesn't exist in wp_global_styles post and ['settings']['typography']['fontFamilies'] node exists in the wp_global_styles post then currently the font is still loaded on the front end

Test Report Icons:
🐞 <= Indicates where issue ("bug") occurs.
✅ <= Behavior is expected.
❌ <= Behavior is NOT expected.