Font Library: Some installed Google fonts don't display in editor or frontend

[ironprogrammer]

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.

google-fonts-with-display-issue.mp4

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

[annezazu]

In earlier versions, I was able to replicate this with the Poppins font but can no longer with GB 16.7! I am getting feedback in the FSE Outreach Program about this though:

Just after uploading a new font, if I go to the styles book and select it for a block, the font won’t load in the Editor. It seems to change to a default font, at least. After hitting save and refresh the Editor, I confirmed the changes were applied in the back and front end, and the font loads also in the Editor

I'll ask what font it was that was uploaded and report back.

[JosVelasco]

Hey, @annezazu. the font that didn't display in the Editor is Dela Gothic One. DelaGothicOne-Regular.ttf
https://fonts.google.com/specimen/Dela+Gothic+One

Also, Sedgwick Ave Display didn't refresh the heading block when I switched the font from Global styles. SedgwickAveDisplay-Regular.ttf
https://fonts.google.com/specimen/Sedgwick+Ave+Display

In earlier versions, I was able to replicate this with the Poppins font but can no longer with GB 16.7! I am getting feedback in the FSE Outreach Program about this though:

Just after uploading a new font, if I go to the styles book and select it for a block, the font won’t load in the Editor. It seems to change to a default font, at least. After hitting save and refresh the Editor, I confirmed the changes were applied in the back and front end, and the font loads also in the Editor

I'll ask what font it was that was uploaded and report back.

[annezazu]

Thanks for looping back here!

Noting that I'm suddenly experiencing this with Inclusive Sans https://fonts.google.com/specimen/Inclusive+Sans after it was repeatedly working. Replicated in GB 16.7 + 6.4 Beta 1:

[tnottu]

Related issue: WordPress/create-block-theme#468

The related problem affects local fonts as well, and one cause is the font name having invalid characters, or character combinations (such as a number preceded by a space) which are not valid font-family values. For more information, see discussion in this Stack Overflow topic