Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
ironprogrammer opened this issue Sep 21, 2023 · 4 comments · Fixed by #55393
Closed

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

ironprogrammer opened this issue Sep 21, 2023 · 4 comments · Fixed by #55393
Assignees
Labels
[Feature] Typography Font and typography-related issues and PRs [Type] Bug An existing feature does not function as intended

Comments

@ironprogrammer
Copy link
Contributor

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

@jordesign jordesign added the [Type] Bug An existing feature does not function as intended label Sep 24, 2023
@annezazu annezazu added [Feature] Typography Font and typography-related issues and PRs and removed [Feature] Fonts API labels Sep 25, 2023
@annezazu
Copy link
Contributor

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
Copy link

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
Copy link
Contributor

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:

Screenshot 2023-09-28 at 9 48 50 AM

@ironprogrammer ironprogrammer changed the title Some installed Google fonts don't display in editor or frontend Font Library: Some installed Google fonts don't display in editor or frontend Oct 3, 2023
@jffng jffng self-assigned this Oct 11, 2023
@tnottu
Copy link

tnottu commented Nov 5, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Typography Font and typography-related issues and PRs [Type] Bug An existing feature does not function as intended
Projects
No open projects
Status: Done
Development

Successfully merging a pull request may close this issue.

6 participants