Description

Some fonts display correctly in the Typography fonts list and Font Library dialog, but the faces are not applied in the editor or the frontend. At first I thought it might be related to mixed alpha/numeric characters in the font name, but received inconsistent results.

I've tested the following fonts, assigned to Headings in the editor, before and after refreshing the editor and checking the site frontend. Included are the generated CSS variables, which can differ between when the font is assigned and reloading the page 🤔:

• ✅ Gothic A1
  • var(--wp--preset--font-family--gothic-a1)
  • same after refresh
• ❌ Libre Barcode 128 Text
  • var(--wp--preset--font-family--libre-barcode-128-text)
  • same after refresh
• ❌ Press Start 2P
  • var(--wp--preset--font-family--press-start-2-p)
  • var(--wp--preset--font-family--press-start-2p)
• ❌ Rock 3D
  • var(--wp--preset--font-family--rock-3-d)
  • var(--wp--preset--font-family--rock-3d)
• ❌ Rubik 80s Fade
  • var(--wp--preset--font-family--rubik-80-s-fade)
  • var(--wp--preset--font-family--rubik-80s-fade)
• ⚠️ VT323
  • ✅var(--wp--preset--font-family--vt-323)
  • ❌var(--wp--preset--font-family--vt323) (stopped displaying properly after save/reload)

Step-by-step reproduction instructions

1. In the site editor, open Styles > Typography.
2. Open the font manager dialog, and select the "Install Fonts" tab.
3. Search for and install any of the fonts identified above (you must check each variant and click the blue Install button).
4. Close the font manager, and select the Headings in the ELEMENTS section.
5. 👀 Use the select box to assign one of the fonts, then observe changes to the headings on in the editor.
6. 👀 Click the Save button to apply the new global styles, then observe changes to the headings on in the editor.
7. 👀 Refresh the page, then observe changes to the headings on in the editor.
8. 👀 Open the site frontend, then observe changes to headings.

For Steps 5-8, you might also check the generated CSS variables assigned to headings.

Screenshots, screen recording, code snippet

This video shows installation of VT323 and the odd behavior between assigning it to Headings and saving global styles. It also shows how neither Press Start P2 or Libre Barcode 128 Text display correctly when assigned in the editor.

Environment info

• Hardware: MacBook Pro Apple M1 Pro
• OS: macOS 13.5.2
• Browser: Safari 16.6
• Server: nginx/1.25.2
• PHP: 7.4.33
• WordPress: 6.4-alpha-56267-src
• Theme: twentytwentythree v1.2
• Active Plugins:
  • gutenberg v16.7.0-rc.1 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