Duplicate font family choices in Global Styles when only 1 font family is registered

[tomjn]

Description

If I specify 1 single font family in theme.json I will still have a family dropdown with 2 options, despite only 1 family being available:

Step-by-step reproduction instructions

I installed twenty twenty three, then removed all font families except for the default system font.

I expected there to be no font family selection UI, or a single choice. instead I saw a dropdown with 2 choices/options: System font, and Default. Selecting Default would lead to System font being selected, so the dropdown is pointless and confusing.

I discovered this while trying to answer this question on stack exchange:

https://wordpress.stackexchange.com/questions/414256/remove-default-font-option-from-gutenberg-typography-settings

Screenshots, screen recording, code snippet

No response

Environment info

WP 6.1.1, latest twentytwentythree, and the latest Gutenberg plugin

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

[tomjn]

The general gist is that this theme.json has 1 font family, but 2 are listed in global styles because one has the origin default, and the other has the origin theme. Even though they are literally the same and come from the same lines, they show as separate options:

{
	"settings": {
		"typography": [
			{
				"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
				"name": "System Font",
				"slug": "system-font"
			}
		]
	},
	"styles": {
		"typography": {
			"fontFamily": "var(--wp--preset--font-family--system-font)"
		}
	}
}

[tomdevisser]

@tomjn Thanks for creating this issue! I don't think we should change this, but think along in case I'm wrong:

If we add a different font without removing this one, and we want to set the new font as the default, the site would look different depending on if you selected "default" or "system font", right? Meaning they have two different "meanings"/values? So, although I agree this looks a bit weird, it still makes sense to me.

[tomjn]

I understand but if there is only 1 font, I would only expect 1 option. That might be "Default" or it might be "System ( default )" or "System" but disabled because there are no other options.

If they mean and do different things that should be obvious from the UI, but it is not. In practical terms they do exactly the same thing.

The other problem, is that having a Default that is listed separately heavily implies that there is a second font family that is not System, e.g. a default WP/Gutenberg font family independent of my theme. If I designed and built my site explicitly to only have 1 font family this suggests a user can break my design.

[tomdevisser]

If they mean and do different things that should be obvious from the UI, but it is not. In practical terms they do exactly the same thing.

@tomjn I feel like it is obvious cause one is "Default" which is literally the default, and one is System, which is the label you give to the font in your theme.json. They're also two different options in your theme.json. If we want to change it here, we would have to change it in theme.json by e.g. adding a 'default' = true but then we'd be messing with the design and consistency of that file.

It feels the same as when a theme has two variables containing the same color. Primary Color and Success Color for example, both containing the same value. It feels unnecessary and weird, but it's so that you can change one without being forced to change the other as well.

[tomjn]

They're also two different options in your theme.json.

No, there is only one.

The goal is to define a single font family, one font family to rule them all, total domination of all font families.

Currently that is not possible using theme.json without a dropdown with 2 options. This is confusing and makes no sense.

[tomjn]

If you are implying that the fontFamily in the styles section, and the fontFamily in the typography sections are separate and independent, and that is why, then you are incorrect.

If I remove the fontFamily in the styles section and use this:

{
	"settings": {
		"typography": [
			{
				"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
				"name": "System Font",
				"slug": "system-font"
			}
		]
	}
}

I still get 2 options:

System now shows the desired font stack, but Default now shows an unwanted CSS reset.

---

If I do the reverse, the dropdown disappears:

{
	"settings": {
		"typography": [ ]
	},
	"styles": {
		"typography": {
			"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif"
		}
	}
}

However I have now lost the ability to specify font files in the theme. Unless the fonts are in the users host machine it falls back to system fonts, this breaks custom font loading in block themes.

[tomjn]

I want to be able to specify a typeface, that is not in the users system and has an asset in the theme, and use it as the default, without offering the user multiple choices that all mean the same thing.

[NielsPilon]

Thanks @tomjn for creating this issue based on my question on the WordPress stackexchange. As stated already this is really confusing when using only a single custom font.

When using a custom theme with specific (font) styles there shouldn't be an option to change the fonts if only one font is used. But you should still be able to use and see the custom font in the editor. With the current implementation with theme.json this isn't possible unfortunately.

[tomjn]

I don't think the font family control should be shown if only a single font family is available, currently it's hidden if no font families are specified. If a second font is registered by a theme/plugin though then it should reappear.

[tomjn]

This is also confusing with multiple fonts as registering 4 fonts creates 3 options + 2 duplicates

[madfcat]

I'm here with you.
I have defined 2 font families in settings.typography.fontFamilies array and I still get this default option which I don't need. I would be glad to set Default to one of my fonts but I can not do it even from styles.typography.fontFamily.

Any ideas?