Font library: Not all fonts are reflected in the backend

[nithins53]

While testing the font library in WordPress 6.5 Beta 1, not all fonts are reflected in the back end once they are applied. But if viewed from the front end the font can be seen properly.

[kafleg]

Please create the issue here, ​https://github.com/WordPress/gutenberg/issues/new/choose

We are also discussing the font library issue here, #60536

[nithins53]

The font I tested it with was this one​https://fonts.google.com/specimen/Are+You+Serious?sort=alpha&query=are+you+serious. One thing I found is that the font is properly reflected if we save the change and visit the editor again. But during the first applications, the font is not reflected on the editor side.

[vivekawsm]

Environment

• WordPress: 6.5-beta1-57631
• PHP: 8.2.4
• Server: Apache/2.4.56 (Win64) OpenSSL/1.1.1t PHP/8.2.4
• Database: mysqli (Server: 10.4.28-MariaDB / Client: mysqlnd 8.2.4)
• Browser: Chrome 121.0.0.0 (Windows 10/11)
• Theme: Twenty Twenty-Four 1.0
• MU-Plugins: None activated

The issue still exists in testing

[vivekawsm]

Backend

[vivekawsm]

Frontend

[audrasjb]

This issue needs to be reported in the upstream Gutenberg repository: ​https://github.com/WordPress/gutenberg/issues/new/

Please let us know when the issue is created on GitHub so we can close this ticket as reported-upstream :)

[nithins53]

Replying to audrasjb:

This issue needs to be reported in the upstream Gutenberg repository: ​https://github.com/WordPress/gutenberg/issues/new/

Please let us know when the issue is created on GitHub so we can close this ticket as reported-upstream :)

The issue has been reported there, here's the link: ​https://github.com/WordPress/gutenberg/issues/59010

[swissspidy]

#60541 was marked as a duplicate.

[audrasjb]

See ​https://github.com/WordPress/gutenberg/issues/59010

[nithins53]

Reopening as a ticket is still needed to add the PR to core ​https://github.com/WordPress/gutenberg/pull/59019.

## What?
Port changes from Gutenberg:

• ​https://github.com/WordPress/gutenberg/pull/59019
• ​https://github.com/WordPress/gutenberg/pull/59103

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

[youknowriad]

In 57657:

Editor: Format and sanitize font family names according the CSS spec.

This fixes two bugs in the font library.

• Fonts using special characters were not being rendered properly in the frontend.
• Allows the ability to use generic() in font family names.

Props mmaattiiaass, nithins53, kafleg, vivekawsm, swissspidy, audrasjb.
Fixes #60537.

Commit https://core.trac.wordpress.org/changeset/57657