script-loader.php doesn't support font-display: optional, that is recommended for performance

[asafm7]

script-loader.php doesn't support font-display: optional, which is recommended by Google to reduce Cumulative Layout Shift.

Current code:

        // Check the font-display.
        if ( ! in_array( $webfont['font-display'], array( 'auto', 'block', 'fallback', 'swap' ), true ) ) {
            $webfont['font-display'] = 'fallback';
        }

font-display: optional combined with rel="preload" is recommended by Google to reduce CLS:
​https://web.dev/preload-optional-fonts/

[merel1988]

I looked in to this one and adding the optional issn't that hard, but to add preload is. It requires some changes in the preload function and because of changes coming up in the webfont api it is not a good idea to do this now.

[asafm7]

Thanks @merel1988 .

While adding the preload might be a good enhancement, as you said, it might require further consideration. Anyway, this can be done with custom code.

My intention, for now, was only to add the 'optional' as a valid value (so it won't be replaced with 'fallback' by the check). This currently can't be done without overriding core code.

Added font-display optional

Trac ticket: https://core.trac.wordpress.org/ticket/58454

[merel1988]

Hi @asafm7,

I just made a PR for that.

Replying to asafm7:

Thanks @merel1988 .

While adding the preload might be a good enhancement, as you said, it might require further consideration. Anyway, this can be done with custom code.

My intention, for now, was only to add the 'optional' as a valid value (so it won't be replaced with 'fallback' by the check). This currently can't be done without overriding core code.

[asafm7]

Perfect @merel1988 , thanks!

[asafm7]

Hi @merel1988

Is it supposed to be merged into the next WordPress release?

[joemcgill]

The PR from @merel1988 looks good to me. @asafm7 can you (or someone else) confirm that this addresses the issue?

[asafm7]

@joemcgill, yes, it does. Thanks @merel1988.

[mukesh27]

@asafm7 and @merel1988, could you please share the steps for testing so that others can also try it out? Thank you in advance!

[asafm7]

Hi @mukesh27:

• Set "fontDisplay": "optional" for a font on theme.json
• Use DevTools to verify the font was actually loaded as optional, and not as font-display: fallback

Thanks for testing.

[mukesh27]

Thanks @asafm7 for testing steps.

I tested the changes and it working fine in my testing.

commit added for consideration. Assign to @joemcgill, feel free to remove assignment. Thanks!

[swissspidy]

This is clearly an enhancement, even if it's a simple one we shouldn't try to shoehorn this kinda stuff into the release that late into the cycle.

[spacedmonkey]

I agree with @swissspidy this is an enhancement. I have changed to enhancement and punted to WP 6.4. I also added early, so this should be committed early.

[joemcgill]

In 56314:

Script Loader: Add support for font-display: optional.

This adds optional to the list of valid font-display values that can be used when validating webfonts.

Props merel1988, asafm7, mukesh27.
Fixes #58454.

Merged in https://core.trac.wordpress.org/changeset/56314. Thanks @Merel1988!