Description

After uploading some custom fonts, the font management UI displays the new font name with a fallback font face (e.g. system serif font). Refreshing or navigating out and back to the editor resolves this, but I expect the newly uploaded font to be accurately represented in the UI without needing to refresh.

This behavior is intermittent, and can vary depending on the font. Here are some examples I tested (all fonts downloaded from Google Fonts for manual upload, except where noted):

• ❌ DM Sans
• ❌ Inclusive Sans
• ✅ Lemonada
• ❌ Press Start 2P
• ✅ Guillon (via zip from Some font names don't work in theme.json fontFamilies/fontFace  #49021)
• ❌ Cooper Black (local TTF converted to WOFF2)

Step-by-step reproduction instructions

1. Navigate to Styles > Typography and open the font management UI.
2. Upload a font file. (Fonts that have an obvious stylistic difference are easier to demonstrate.)
3. On the Library tab, observe that the new font's name is not styled with the new font.
4. Observe the same in the font's variant details and active font list on the Typography panel.
5. Refresh the editor and navigate back to Styles > Typography.
6. Observe the display of the new font in the active fonts list and within the font management modal.

Screenshots, screen recording, code snippet

Figure 1: Demonstration of font display after upload, then before and after refreshing the editor screen.

Environment info

• Hardware: MacBook Pro Apple M1 Pro
• OS: macOS 13.6
• Browser: Safari 16.6, Google Chrome 117.0.5938.132
• Server: nginx/1.25.2
• PHP: 7.4.33
• WordPress: 6.4-beta2
• Theme: twentytwentyfour v1.0
• Active Plugins:
  • gutenberg v16.7.0 trunk

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