Adding a theme.json file removes the Gutenberg font stack

[hashimaziz1]

Description

When I add a theme.json to my project, the title's font regresses to an ugly serif, Times New Roman in my case. Inspecting with dev tools shows that the following selector in load-styles.php is responsible for this:

html :where(.editor-styles-wrapper) {
  font-family: serif;
}

...and disabling it reverts back to the default font stack of:

-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif

The problem is that load-styles.php seems to be a Wordpress core file and changing it would require other measures to make sure future updates don't replace it. I know workarounds exist, but I don't think extra code should be needed since this is a bug that prevents theme.json from being used the way the documentation says it should be.

Step-by-step reproduction instructions

1. Add a bare minimum theme.json:

{
  "version": 3
}

2. Start creating a new post in the Gutenberg editor and type a title - the content will be aligned left and in a serif font

3. Adding "contentSize" fixes the left-alignment, but there doesn't seem to be any fix for the unset font stack

Screenshots, screen recording, code snippet

No response

Environment info

6.7.2, unknown Gutenberg version, and Blocksy version
Windows 10 desktop, Firefox and Chrome
Local development environment with spotty HTTPS support, if it makes a difference

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[carolinan]

Is there an issue with adding your preferred font family in theme.json? It is its purpose.

[hashimaziz1]

I didn't have a preferred font family, I just wanted to use a theme.json file to hide some panels in the editor without throwing all the default styles away, including the font stack. A few hours of research later and I've since found that's (mostly) possible by enabling an obscure setting under the user's Preferences called Use theme styles, which is probably something that should be in the theme.json documentation rather than hidden away here. It also requires adding a contentSize: 780px or similar to restore that default, and even then it's still a little off, but much better than before. I'm very confused as to why this wouldn't be considered a bug, because it makes using theme.json very unintuitive at best. It doesn't seem sane to throw away all defaults just because I want to override a few.

[carolinan]

"Use theme styles" does not "hide some panels in the editor".
I am struggling to understand what you are tying to do :) I don't think I can be of help without understanding the goal.

What I tried to say that the purpose of theme.json is to add new defaults.
When you leave it empty you are still overriding the defaults with your own default.

[t-hamano]

html :where(.editor-styles-wrapper) {
  font-family: serif;
}

This style is defined here:

gutenberg/packages/block-library/src/reset.scss

Lines 10 to 13 in e093fef

	:where(.editor-styles-wrapper) {
	// The following styles revert to the browser defaults overriding the WPAdmin styles.
	html & {
	font-family: serif; // unfortunately initial doesn't work for font-family.

This style exists to prevent the non-iframe editor from inheriting admin styles.

...and disabling it reverts back to the default font stack of:

-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif

This font-family is defined in the core for the dashboard and should not be inherited by the editor.

If the editor is not an iframe, it will be affected by the WP-Admin styles. To make the editor layout match the frontend, there are some reset styles that override the WP-Admin styles. I think font-family: serif is one of them.