Fonts not loading in page/site editor with Gutenberg 15.9 RC1

[bgardner]

Description

I have several themes that load Outfit font from Google, and with Gutenberg 15.9 RC1 active, they are not being enqueued properly in page/site editors. The front end works as expected. To further test, I confirmed this is also true of the Hey theme by Automattic. If I deactivate the plugin, the fonts load as expected.

Step-by-step reproduction instructions

1. Activate theme with Google fonts
2. Activate Gutenberg 15.9 RC1
3. View content on page/site editors

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 6.2.2, Gutenberg 15.9 RC1

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

[bgardner]

Adding video to show what happens when plugin is activated/deactivated:

Screen.Recording.2023-05-25.at.8.51.07.AM.mov

[ndiego]

I am able to confirm with TT3 using the included font families. cc @c4rl0sbr4v0 this would be great to get fixed before 15.9 goes out the door.

[WraithKenny]

Able to reproduce also, shows Helvetica in FSE editor.

[WraithKenny]

#50929 is also a font related regression.

[cbravobernal]

I'm not really sure that I will be able to fix it before the RC2 😢

[richtabor]

Confirmed this issue.

[hellofromtonya]

Activate theme with Google fonts

Does the theme have a local asset file for the Google font? Or is a custom provider included that remotely interacts with Google Fonts foundry API?

Why am I asking?

Because Gutenberg ships with a "local" provider for processing local asset files. But if the @font-face src comes from Google Fonts API, then a custom provider is needed, which could mean there's an issue within that provider (which is not provided in Gutenberg).

Knowing this can help with reproduction and investigation.

[hellofromtonya]

Test Report

Env:

• Plugins: Gutenberg 15.9 RC2
• Theme: TT3
• Must-Use: none
• LocalHost: Local
• OS: macOS
• Browser: Firefox

Test Steps

1. Downloaded the 15.9 RC2 gutenberg.zip file and added it as new plugin through WP's Plugins > Add New UI
2. Navigated to the Site Editor > Styles > Typography UI
3. Selected "Headings"
4. Selected the "Font" as "Source Serif Pro" (which has a local font file in the TT3 theme)
5. Compared the rendered heading font to the same font on Google Fonts site

Results

✅ Font rendered as expected.

❌ Could not reproduce the reported issue using a font that has a local asset file in the theme.

Summary

Next, I'll try using a Google Fonts Provider that interacts with Google Fonts Foundry API rather than supplying a local font asset file. I'll use this test plugin that includes Jetpack's Google Fonts Provider package.

[hellofromtonya]

Test Report 2

Env:

• Plugins:
  • Gutenberg 15.9 RC2
  • Webfonts Jetpack Test which uses Jetpack Google Fonts Provider package
• Theme: TT3
• Must-Use: none
• LocalHost: Local
• OS: macOS
• Browser: Firefox

Test Steps

Set up

1. Gutenberg 15.9 RC plugin:
   • Downloaded the 15.9 RC2 gutenberg.zip file
   • Added it as new plugin through WP's Plugins > Add New UI
   • Activated it.
2. Webfonts Jetpack Test plugin
   • Downloaded the zip file from GitHub by clicking on the "Code" selector and then selecting "Download ZIP".
   • Added it as new plugin through WP's Plugins > Add New UI.
   • Activated it.

Scenario 1: Selecting a Google Font in Site Editor but not saving the custom style.

1. Navigated to the Site Editor > Styles > Typography UI
2. Selected "Headings"
3. Selected the "Font" as "Merriweather" (which is a Google Font that does not have a local asset file in the plugin or theme but instead will interact with Google Fonts Foundry API)
4. Selected the "Appearance" as "Bold Italic".
5. Compared the rendered heading font to the same font on Google Fonts site. Do they match?

Scenario 2: After saving the custom style in the Site Editor.

1. Save the custom heading.
2. Reload the Site Editor.
3. Again compare the headings to the same font on Google Fonts site
   Do they match?

Scenario 3: Editing an existing post after saving the custom style in the Site Editor.

1. Exit the Site Editor.
2. Open an existing Post by navigating to All Posts > selecting the Hello World or other existing post
3. Again compare the headings to Google Fonts site. Do they match?

Results

Scenario 1:

✅ Google Font rendered as expected.

❌ Could not reproduce the reported issue.

Scenario 2: After saving the custom style in the Site Editor.

✅ Google Font rendered as expected.

❌ Could not reproduce the reported issue.

Scenario 3: Editing an existing post after saving the custom style in the Site Editor.

✅ Google Font rendered as expected.

❌ Could not reproduce the reported issue.

Summary

Hmm, in all 3 scenarios, I could not reproduce the reported issue for a Google Font. Each scenario rendered as expected and the @font-face styles were correct in the HTML for each.

[bgardner]

@hellofromtonya Yes, my themes (as did the Hey theme I also tested) come packaged with local font source files. For example, you can see how Frost has them included.

[bgardner]

@hellofromtonya And additionally, how they are registered via theme.json.

[hellofromtonya]

Thanks @bgardner. Let me try the Frost theme with my test set up. Test Report coming.