Font Library: Google Fonts Variant Selection Defaults to Topmost Variant in Japanese (Multi-byte) Environments

[chiilog]

Description

In Japanese environments (and likely in all multi-byte environments), when installing a font from Google Fonts, clicking on the font during the variant selection process always results in the topmost variant being selected. However, if you use the checkbox to select a variant, the intended variant is correctly applied.

Step-by-step reproduction instructions

1. Set the site's language to Japanese.
2. Update (refresh) the translations.
3. Go to Appearance -> Editor -> Styles -> Typography
4. Select Manage fonts
5. Install any font and select a variant

Screenshots, screen recording, code snippet

2025-01-29.14.57.24.mov

Environment info

• Studio by WordPress.com v1.3.2
• Twenty Twenty-Five
• Gutenberg 20.1.0 (This issue also occurs even when the plugin is not installed.)

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[torounit]

I can reproduced.

The font weight numbers are converted to strings such as “bold” before being converted to kebab cases. Since the converted string is translated, it seems that the string representing the weights is lost when converted to kebab cases.

[t-hamano]

The checkboxes and labels are associated with each other via the id and htmlFor attributes, but it doesn't seem appropriate to include a string that may be localized as part of the value.

What about using useInstanceId to generate a unique id?

[t-hamano]

I'm sure this issue has been around for a while, but I think it's a big problem for non-Latin languages, so let's fix it in WP 6.8.