Font Library: Uploaded fonts do not always display correctly until after page refresh

[ironprogrammer]

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

[franzaurus]

I experience this too. In my case, it seems the intermittent behavior primarily happens to display fonts type (Google font classification: display).

The fonts are properly display if I choose: technology (variable), decorative style (sans serif), classification (any) e.g. Montserrat, Open Sans and Space Grotesk. But the problem appears if I select technology (variable), decorative style (sans serif), classification (display) e.g. Tilt Neon, Big Shoulders Stencil Display and Pixelify Sans.

Environment info:

Windows 11 ver. 22H2
Chrome browser 117.0.5938.134
Local WP Version 7.2.1+6433
Gutenberg 16.7.1
WordPress 6.3.1

[t-hamano]

One reason for this problem may be that the added font's @font-face definition is not loaded until the browser is reloaded. I think we probably need some logic to dynamically add @font-face.

Figure 1: Immediately after uploading the PressStart2P-Regular.ttf font. There is no @font-face definition for this font:

Figure 2: After reloading the browser, you will see that @font-face has been added for this font:

[matiasbenedetto]

I added a commit ( 0d8330c ) in this PR #55393 that seems to be solving this problem.

[jffng]

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.

I gave this a test just now, and it's fixed with #55393. Thanks everyone.