diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js
index 9bc875cdc0a308..a9db994f495ca8 100644
--- a/packages/block-editor/src/components/global-styles/typography-panel.js
+++ b/packages/block-editor/src/components/global-styles/typography-panel.js
@@ -178,6 +178,7 @@ export default function TypographyPanel( {
 	settings,
 	panelId,
 	defaultControls = DEFAULT_CONTROLS,
+	fitText = false,
 } ) {
 	const decodeValue = ( rawValue ) =>
 		getValueFromVariable( { settings }, '', rawValue );
@@ -439,6 +440,7 @@ export default function TypographyPanel( {
 						withReset={ false }
 						withSlider
 						size="__unstable-large"
+						disabled={ fitText }
 					/>
 				</ToolsPanelItem>
 			) }
diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js
index 066211c15aafe9..18e6c86828cb50 100644
--- a/packages/block-editor/src/hooks/typography.js
+++ b/packages/block-editor/src/hooks/typography.js
@@ -116,11 +116,13 @@ function TypographyInspectorControl( { children, resetAllFilter } ) {
 
 export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
 	function selector( select ) {
-		const { style, fontFamily, fontSize } =
+		const { style, fontFamily, fontSize, fitText } =
 			select( blockEditorStore ).getBlockAttributes( clientId ) || {};
-		return { style, fontFamily, fontSize };
+		return { style, fontFamily, fontSize, fitText };
 	}
-	const { style, fontFamily, fontSize } = useSelect( selector, [ clientId ] );
+	const { style, fontFamily, fontSize, fitText } = useSelect( selector, [
+		clientId,
+	] );
 	const isEnabled = useHasTypographyPanel( settings );
 	const value = useMemo(
 		() => attributesToStyle( { style, fontFamily, fontSize } ),
@@ -148,6 +150,7 @@ export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
 			value={ value }
 			onChange={ onChange }
 			defaultControls={ defaultControls }
+			fitText={ fitText }
 		/>
 	);
 }
diff --git a/packages/components/src/custom-select-control-v2/custom-select.tsx b/packages/components/src/custom-select-control-v2/custom-select.tsx
index 9b4bd0616cbb16..decae373fc744a 100644
--- a/packages/components/src/custom-select-control-v2/custom-select.tsx
+++ b/packages/components/src/custom-select-control-v2/custom-select.tsx
@@ -93,6 +93,7 @@ function _CustomSelect(
 ) {
 	const {
 		children,
+		disabled = false,
 		hideLabelFromVision = false,
 		label,
 		size,
@@ -135,11 +136,13 @@ function _CustomSelect(
 				__next40pxDefaultSize
 				size={ size }
 				suffix={ <SelectControlChevronDown /> }
+				disabled={ disabled }
 			>
 				<CustomSelectButton
 					{ ...restProps }
 					size={ size }
 					store={ store }
+					disabled={ disabled }
 					// Match legacy behavior (move selection rather than open the popover)
 					showOnKeyDown={ ! isLegacy }
 				/>
diff --git a/packages/components/src/custom-select-control-v2/types.ts b/packages/components/src/custom-select-control-v2/types.ts
index a31598c1db3ead..e51bbd44fbddf0 100644
--- a/packages/components/src/custom-select-control-v2/types.ts
+++ b/packages/components/src/custom-select-control-v2/types.ts
@@ -67,6 +67,12 @@ export type _CustomSelectProps = CustomSelectButtonProps & {
 	 * The child elements. This should be composed of `CustomSelectItem` components.
 	 */
 	children: React.ReactNode;
+	/**
+	 * If true, the control will be disabled and the user will not be able to interact with it.
+	 *
+	 * @default false
+	 */
+	disabled?: boolean;
 	/**
 	 * Used to visually hide the label. It will always be visible to screen readers.
 	 *
diff --git a/packages/components/src/custom-select-control/index.tsx b/packages/components/src/custom-select-control/index.tsx
index e014e4bc642eef..7afffbbbcd29a3 100644
--- a/packages/components/src/custom-select-control/index.tsx
+++ b/packages/components/src/custom-select-control/index.tsx
@@ -59,6 +59,7 @@ function CustomSelectControl< T extends CustomSelectOption >(
 		__next40pxDefaultSize = false,
 		__shouldNotWarnDeprecated36pxSize,
 		describedBy,
+		disabled = false,
 		options,
 		onChange,
 		size = 'default',
@@ -188,6 +189,7 @@ function CustomSelectControl< T extends CustomSelectOption >(
 		<>
 			<_CustomSelect
 				aria-describedby={ descriptionId }
+				disabled={ disabled }
 				renderSelectedValue={
 					showSelectedHint ? renderSelectedValueHint : undefined
 				}
diff --git a/packages/components/src/custom-select-control/types.ts b/packages/components/src/custom-select-control/types.ts
index dd3db6d3bb0f95..19666f6f5cf7e0 100644
--- a/packages/components/src/custom-select-control/types.ts
+++ b/packages/components/src/custom-select-control/types.ts
@@ -37,6 +37,12 @@ export type CustomSelectProps< T extends CustomSelectOption > = {
 	 * Optional classname for the component.
 	 */
 	className?: string;
+	/**
+	 * If true, the control will be disabled and the user will not be able to interact with it.
+	 *
+	 * @default false
+	 */
+	disabled?: boolean;
 	/**
 	 * Hide the label visually, while keeping available to assistive technology.
 	 */
diff --git a/packages/components/src/font-size-picker/font-size-picker-select.tsx b/packages/components/src/font-size-picker/font-size-picker-select.tsx
index 0d3681f39d5a97..0b09974bb1014e 100644
--- a/packages/components/src/font-size-picker/font-size-picker-select.tsx
+++ b/packages/components/src/font-size-picker/font-size-picker-select.tsx
@@ -20,7 +20,14 @@ const DEFAULT_OPTION: FontSizePickerSelectOption = {
 };
 
 const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
-	const { __next40pxDefaultSize, fontSizes, value, size, onChange } = props;
+	const {
+		__next40pxDefaultSize,
+		fontSizes,
+		value,
+		size,
+		disabled,
+		onChange,
+	} = props;
 
 	const options: FontSizePickerSelectOption[] = [
 		DEFAULT_OPTION,
@@ -56,6 +63,7 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 			options={ options }
 			value={ selectedOption }
 			showSelectedHint
+			disabled={ disabled }
 			onChange={ ( {
 				selectedItem,
 			}: {
diff --git a/packages/components/src/font-size-picker/font-size-picker-toggle-group.tsx b/packages/components/src/font-size-picker/font-size-picker-toggle-group.tsx
index 1b3619c800e453..fc987a1cfbdb23 100644
--- a/packages/components/src/font-size-picker/font-size-picker-toggle-group.tsx
+++ b/packages/components/src/font-size-picker/font-size-picker-toggle-group.tsx
@@ -14,7 +14,14 @@ import { T_SHIRT_ABBREVIATIONS, T_SHIRT_NAMES } from './constants';
 import type { FontSizePickerToggleGroupProps } from './types';
 
 const FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {
-	const { fontSizes, value, __next40pxDefaultSize, size, onChange } = props;
+	const {
+		fontSizes,
+		value,
+		__next40pxDefaultSize,
+		size,
+		disabled,
+		onChange,
+	} = props;
 	return (
 		<ToggleGroupControl
 			__nextHasNoMarginBottom
@@ -26,6 +33,7 @@ const FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {
 			onChange={ onChange }
 			isBlock
 			size={ size }
+			disabled={ disabled }
 		>
 			{ fontSizes.map( ( fontSize, index ) => (
 				<ToggleGroupControlOption
@@ -34,6 +42,7 @@ const FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {
 					label={ T_SHIRT_ABBREVIATIONS[ index ] }
 					aria-label={ fontSize.name || T_SHIRT_NAMES[ index ] }
 					showTooltip
+					disabled={ disabled }
 				/>
 			) ) }
 		</ToggleGroupControl>
diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx
index 6bc2bd206ebe0a..018da88c9ac04e 100644
--- a/packages/components/src/font-size-picker/index.tsx
+++ b/packages/components/src/font-size-picker/index.tsx
@@ -42,6 +42,7 @@ const UnforwardedFontSizePicker = (
 		fallbackFontSize,
 		fontSizes = [],
 		disableCustomFontSizes = false,
+		disabled = false,
 		onChange,
 		size = 'default',
 		units: unitsProp = DEFAULT_UNITS,
@@ -96,7 +97,7 @@ const UnforwardedFontSizePicker = (
 	);
 	const isValueUnitRelative =
 		!! valueUnit && [ 'em', 'rem', 'vw', 'vh' ].includes( valueUnit );
-	const isDisabled = value === undefined;
+	const isDisabled = disabled || value === undefined;
 
 	maybeWarnDeprecated36pxSize( {
 		componentName: 'FontSizePicker',
@@ -110,6 +111,7 @@ const UnforwardedFontSizePicker = (
 			className="components-font-size-picker"
 			// This Container component renders a fieldset element that needs to be labeled.
 			aria-labelledby={ labelId }
+			disabled={ disabled }
 		>
 			<Spacer>
 				<Header className="components-font-size-picker__header">
@@ -129,6 +131,7 @@ const UnforwardedFontSizePicker = (
 							}
 							isPressed={ currentPickerType === 'custom' }
 							size="small"
+							disabled={ disabled }
 						/>
 					) }
 				</Header>
@@ -141,6 +144,7 @@ const UnforwardedFontSizePicker = (
 						value={ value }
 						disableCustomFontSizes={ disableCustomFontSizes }
 						size={ size }
+						disabled={ disabled }
 						onChange={ ( newValue ) => {
 							if ( newValue === undefined ) {
 								onChange?.( undefined );
@@ -163,6 +167,7 @@ const UnforwardedFontSizePicker = (
 						value={ value }
 						__next40pxDefaultSize={ __next40pxDefaultSize }
 						size={ size }
+						disabled={ disabled }
 						onChange={ ( newValue ) => {
 							if ( newValue === undefined ) {
 								onChange?.( undefined );
@@ -188,6 +193,7 @@ const UnforwardedFontSizePicker = (
 								labelPosition="top"
 								hideLabelFromVision
 								value={ value }
+								disabled={ disabled }
 								onChange={ ( newValue ) => {
 									setUserRequestedCustom( true );
 
@@ -221,6 +227,7 @@ const UnforwardedFontSizePicker = (
 										value={ valueQuantity }
 										initialPosition={ fallbackFontSize }
 										withInputField={ false }
+										disabled={ disabled }
 										onChange={ ( newValue ) => {
 											setUserRequestedCustom( true );
 
diff --git a/packages/components/src/font-size-picker/types.ts b/packages/components/src/font-size-picker/types.ts
index 04964e05d45d55..b862120f27d2c7 100644
--- a/packages/components/src/font-size-picker/types.ts
+++ b/packages/components/src/font-size-picker/types.ts
@@ -6,6 +6,13 @@ export type FontSizePickerProps = {
 	 * @default false
 	 */
 	disableCustomFontSizes?: boolean;
+	/**
+	 * If `true`, the font size picker will be disabled and the user will not
+	 * be able to change the font size.
+	 *
+	 * @default false
+	 */
+	disabled?: boolean;
 	/**
 	 * If no value exists, this prop defines the starting position for the font
 	 * size picker slider. Only relevant if `withSlider` is `true`.
@@ -100,7 +107,7 @@ export type FontSize = {
 
 export type FontSizePickerSelectProps = Pick<
 	FontSizePickerProps,
-	'value' | 'size'
+	'value' | 'size' | 'disabled'
 > & {
 	fontSizes: NonNullable< FontSizePickerProps[ 'fontSizes' ] >;
 	disableCustomFontSizes: NonNullable<
@@ -120,7 +127,7 @@ export type FontSizePickerSelectOption = {
 
 export type FontSizePickerToggleGroupProps = Pick<
 	FontSizePickerProps,
-	'value' | 'size' | '__next40pxDefaultSize'
+	'value' | 'size' | '__next40pxDefaultSize' | 'disabled'
 > & {
 	fontSizes: NonNullable< FontSizePickerProps[ 'fontSizes' ] >;
 	onChange: NonNullable< FontSizePickerProps[ 'onChange' ] >;