Font Library: some Google fonts aren't displayed correctly on front end

[okmttdhr]

Description

We've encountered a problem with font variant selection in our application. Specifically, this issue arose when selecting the "ABeeZee" or "ADLaM Display" fonts. I did not have time to examine all the other fonts, but I tested from 10 to 20 and only found these 2. While these fonts appear correctly in the editor (which might require reload due to #58765, though), and their references are present in the code for the live site, they do not display as intended when viewed on the website. Instead, a default system font is shown.

Expected Behavior: The selected font variants, "ABeeZee" and "ADLaM Display", should display correctly on the live site as they do within the editor.

Step-by-step reproduction instructions

• Open the Font Library modal
• Select "ABeeZee" or "ADLaM Display" from Google Fonts
• Apply the font and view the change in the editor (note that it appears correct within the editor).
• Save changes to observe the font display.

Screenshots, screen recording, code snippet

The font (ADLaM Display) is displayed on the editor;

The font (ADLaM Display) is not displayed on the live site, while it seems to have the correct style;

Note that there were no font face outputs with document.fonts.forEach((f) => console.log(f)) on the live site.

Environment info

Gutenberg >= 17.6

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

Yes

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

No

[annezazu]

I can replicate with 6.5 beta 1 but only if I select the font for an individual block. If I select something in global styles, it works! Adding to 6.5 board.

[okmttdhr]

This seems to be caused by the Jetpack Google Font Module, which is related to how font faces are managed.

Jetpack prints font faces that are in use, and it determines which Google Fonts are in use by checking the fontFamily attributes within block settings
https://github.com/Automattic/jetpack/blob/67bcc94e6a60499f3ae900aff7cc6cd4123bb3e2/projects/plugins/jetpack/modules/google-fonts/current/class-jetpack-google-font-face.php#L113-L129

Font faces are then added to $fonts_to_print based on a match with the fontFamily names
https://github.com/Automattic/jetpack/blob/67bcc94e6a60499f3ae900aff7cc6cd4123bb3e2/projects/plugins/jetpack/modules/google-fonts/current/class-jetpack-google-font-face.php#L63

However, an issue arises with font names undergoing kebab-case conversion via _wp_to_kebab_case. Specifically, "ADLaM Display" is converted to ad-la-m-display, which mismatches its adlam-display in block settings. Consequently, this discrepancy prevents the font from being recognized as in use and thus not being added to $fonts_to_print, resulting in it not displaying on the frontend.

[arthur791004]

Closing it via Automattic/jetpack#35706