Fonts with spaces are not correctly applied

[srueegger]

Description

If I upload a font (woff2) that has one or more spaces in the name, this font is not declared correctly in the CSS in the frontend and is therefore not displayed.

Here is the concrete problem:

When I upload the font "Heineken Serif 18" in the new font library (The fonts I use are attached) the following CSS is created in the frontend:

body { --wp--preset--font-family--heineken-serif-18: Heineken Serif 18; }

Therefore, the font is not displayed: But it should be the following:

body { --wp--preset--font-family--heineken-serif-18: "Heineken Serif 18"; }

The strange thing is that I installed a second font directly from Google Fonts as a test (see attached screenshot). The font is called "PT Sans", and this is correctly declared with quotation marks.

Step-by-step reproduction instructions

1. Go to Theme Customizer
2. Open The Font Library
3. Upload the Fonts
4. Set the Font as Default

Screenshots, screen recording, code snippet

Environment info

WordPress 6.5-RC3-57856,
Ubuntu 22.04 Desktop System in Firefox and Google Chrome

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[srueegger]

I forgot to add the ZIP Files with the Fonts.

heinekene-woff2.zip

[annezazu]

Thank you for opening and testing @srueegger. Really appreciate it. @matiasbenedetto can you look into this? Adding to 6.5 to be safe.

[carolinan]

I was able to reproduce the issue with the fonts in the zip file.

I tried uploading:
A font that has one space, but no numbers. The quotes were added.
A font that has two spaces, but no numbers. The quotes were added.
Another font that has one space and numbers. The quotes were not added.

So it seems related to the numbers, not the spaces?, Perhaps it is an issue in maybe_add_quotes() in WP_Font_Utils?

[matiasbenedetto]

Thanks for reporting the issue!

This isn't a problem related to the font library source code but a bug in the WP_Font_Face_Resolver class.
I found that this method seems to be causing the problem:
https://github.com/WordPress/wordpress-develop/blob/8d0aed455b1790c5d51386f7675d9e8d68e48edf/src/wp-includes/fonts/class-wp-font-face-resolver.php#L78-L95

I'll submit a PR with a fix soon.

[matiasbenedetto]

I took a closer look at this issue, and I found that this issue is in fact part of the font library codebase or at least can be fix there reducing it's scope which I think it's safer considering the next release 6.5 release. Could you please review this potential fix: #60093 ?

[getdave]

@srueegger Thanks for raising this Issue. I trust you won't mind that I've taken the liberty of renaming this Issue to better reflect the problem at hand.

It looks like there is a potential fix. Are you able to assist in testing?

[getdave]

Test coverage added and merged in #60221