Description

Let's say, there is a font size called huge that is 100px in a theme.

On the front of the site, an element with the huge size appears 100px, as expected. However, in the editor, it appears 42px.

To demonstrate the issue, I've added a font size, huge to TT3's theme.json, and changed the size of the heading in home.html

{
	"settings": {
		"typography": {
			"fontSizes": [
				{
					"size": "100px",
					"slug": "huge",
					"name": "Huge"
				}
			]
		}
	}
}

Front of site	Editor

The size is overridden by this, which comes from here. The !important seems to be the problem.

If I deactivate Gutenberg (trunk), the font size will return to 100px in the editor.

Step-by-step reproduction instructions

1. Activate a theme that has a font size called huge or add the size like above in a theme.json
2. Specify a text element like a heading to use the huge size.
3. See the discrepancy in size between in the editor and the front of the site.

Screenshots, screen recording, code snippet

No response

Environment info

WP 6.3.1.
Gutenberg 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