Global Styles: Font Appearance doesn't work well with theme.json default value

[t-hamano]

Description

If the theme.json defines a default fontWeight, there are two problems in the Global Styles UI:

• Shown as a resettable value even though it is already the default value
• Keyword values such as bold, regular etc. are not being applied to the dropdown

Perhaps the FontAppearanceControl component is not properly mapping number values and keyword values.

Step-by-step reproduction instructions

After defining the theme.json like the one below, access the Global Styles > Typography panel.

Note

If you are unable to reproduce the problem, reset the global styles.

Number Value (font-weight: 700)

Define the following theme.json:

{
	"version": 3,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "840px"
		}
	},
	"styles": {
		"typography": {
			"fontWeight": "700"
		}
	}
}

• Expected: The reset button should be disabled when the font-weight value has already been defaulted
• Actual: The reset button is always enabled

fdc5998218550c73ca703a02c242b64d.mp4

Keyword Value (font-weight: bold)

Define the following theme.json:

{
	"version": 3,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "840px"
		}
	},
	"styles": {
		"typography": {
			"fontWeight": "bold"
		}
	}
}

• Expected: "Bold" is selected
• Actual: "Thin" is selected

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

[hbhalodia]

Hi @t-hamano, On further debugging on the below issue,

{
	"version": 3,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "840px"
		}
	},
	"styles": {
		"typography": {
			"fontWeight": "bold"
		}
	}
}

1. Expected bold to be selected.
2. Actual thin is selected.

I have logged the console in component, global-styles/typography-panel.js and found that, fontWeight is correctly identified that is bold, but just after that we are calling,

gutenberg/packages/block-editor/src/components/global-styles/typography-panel.js

Lines 236 to 242 in be4208b

	const fontStyle = decodeValue( inheritedValue?.typography?.fontStyle );
	const fontWeight = decodeValue( inheritedValue?.typography?.fontWeight );
	const { nearestFontStyle, nearestFontWeight } = findNearestStyleAndWeight(
	fontFamilyFaces,
	fontStyle,
	fontWeight
	);

const { nearestFontStyle, nearestFontWeight } = findNearestStyleAndWeight(
		fontFamilyFaces,
		fontStyle,
		fontWeight
	);

Which do some processing here,

gutenberg/packages/block-editor/src/components/global-styles/typography-utils.js

Lines 251 to 299 in be4208b

	export function findNearestStyleAndWeight(
	fontFamilyFaces,
	fontStyle,
	fontWeight
	) {
	let nearestFontStyle = fontStyle;
	let nearestFontWeight = fontWeight;
	const { fontStyles, fontWeights, combinedStyleAndWeightOptions } =
	getFontStylesAndWeights( fontFamilyFaces );
	// Check if the new font style and weight are available in the font family faces.
	const hasFontStyle = fontStyles?.some(
	( { value: fs } ) => fs === fontStyle
	);
	const hasFontWeight = fontWeights?.some(
	( { value: fw } ) => fw?.toString() === fontWeight?.toString()
	);
	if ( ! hasFontStyle ) {
	/*
	* Default to italic if oblique is not available.
	* Or find the nearest font style based on the nearest font weight.
	*/
	nearestFontStyle = fontStyle
	? findNearestFontStyle( fontStyles, fontStyle )
	: combinedStyleAndWeightOptions?.find(
	( option ) =>
	option.style.fontWeight ===
	findNearestFontWeight( fontWeights, fontWeight )
	)?.style?.fontStyle;
	}
	if ( ! hasFontWeight ) {
	/*
	* Find the nearest font weight based on available weights.
	* Or find the nearest font weight based on the nearest font style.
	*/
	nearestFontWeight = fontWeight
	? findNearestFontWeight( fontWeights, fontWeight )
	: combinedStyleAndWeightOptions?.find(
	( option ) =>
	option.style.fontStyle ===
	( nearestFontStyle || fontStyle )
	)?.style?.fontWeight;
	}
	return { nearestFontStyle, nearestFontWeight };
	}

And is overriding the styles, once we have those, it resets the fontStyles and Weights, and font weight resets to Thin.

Here is the screencast for the same I have log console of, as you see it changes from bold to thin font weigth.

Screen.Recording.2025-07-30.at.3.46.28.PM.mov

I am debugging more and it and would find why that is being overriden and set to 100.

Update: Found that, findNearestFontWeight function is not respecting the font if that is in string bold, but it would respect if added as 700.

[hbhalodia]

Hi @t-hamano, I have raised the PR to fix the issue related to fontWeight text and number mapping, Would like to have your review on the approach.

PR - #70976

Thanks

[hbhalodia]

@t-hamano, On further debugging on the issue,

{
	"version": 3,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "840px"
		}
	},
	"styles": {
		"typography": {
			"fontWeight": "700"
		}
	}
}

• Expected: The reset button should be disabled when the font-weight value has already been defaulted
• Actual: The reset button is always enabled

I do have found that it is something to do with this line of code,

gutenberg/packages/block-editor/src/components/global-styles/typography-panel.js

Lines 259 to 260 in e5ff7e4

	const hasFontAppearance = () =>
	!! value?.typography?.fontStyle || !! value?.typography?.fontWeight;

Not sure what exact change, but when I add the default to false, the reset button get's disabled, and I checked with other panel items like line height, it produces false value when there is no change, if we change lineHeight, reset buttons enables and that values changes to true, So may be something we need to play with?

Also I see the setFontApperance get's the correct value when changed from bold to default,

gutenberg/packages/block-editor/src/components/global-styles/typography-panel.js

Lines 243 to 258 in e5ff7e4

	const setFontAppearance = useCallback(
	( { fontStyle: newFontStyle, fontWeight: newFontWeight } ) => {
	// Only update the font style and weight if they have changed.
	if ( newFontStyle !== fontStyle || newFontWeight !== fontWeight ) {
	onChange( {
	...value,
	typography: {
	...value?.typography,
	fontStyle: newFontStyle || undefined,
	fontWeight: newFontWeight || undefined,
	},
	} );
	}
	},
	[ fontStyle, fontWeight, onChange, value ]
	);

But somehow on re-rendering the data get's back to original state, hence the default option is not selected when changed.