diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php
index 212b058f822d70..694128884fc61d 100644
--- a/lib/block-supports/typography.php
+++ b/lib/block-supports/typography.php
@@ -72,6 +72,7 @@ function gutenberg_register_typography_support( $block_type ) {
  * @return array Typography CSS classes and inline styles.
  */
 function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
+
 	if ( ! property_exists( $block_type, 'supports' ) ) {
 		return array();
 	}
@@ -108,7 +109,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 	if ( $has_font_size_support && ! $should_skip_font_size ) {
 		$preset_font_size                    = array_key_exists( 'fontSize', $block_attributes ) ? "var:preset|font-size|{$block_attributes['fontSize']}" : null;
 		$custom_font_size                    = isset( $block_attributes['style']['typography']['fontSize'] ) ? $block_attributes['style']['typography']['fontSize'] : null;
-		$typography_block_styles['fontSize'] = $preset_font_size ? $preset_font_size : $custom_font_size;
+		$typography_block_styles['fontSize'] = $preset_font_size ? $preset_font_size : gutenberg_get_typography_font_size_value( array( 'size' => $custom_font_size ) );
 	}
 
 	if ( $has_font_family_support && ! $should_skip_font_family ) {
@@ -381,7 +382,7 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
 	$typography_settings         = gutenberg_get_global_settings( array( 'typography' ) );
 	$should_use_fluid_typography = isset( $typography_settings['fluid'] ) && true === $typography_settings['fluid'] ? true : $should_use_fluid_typography;
 
-	if ( ! $should_use_fluid_typography ) {
+	if ( ! $should_use_fluid_typography || empty( $preset['size'] ) ) {
 		return $preset['size'];
 	}
 
diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js
index 40abdd8f8eb302..7b45c3199624bc 100644
--- a/packages/block-editor/src/hooks/font-size.js
+++ b/packages/block-editor/src/hooks/font-size.js
@@ -22,6 +22,8 @@ import {
 	shouldSkipSerialization,
 } from './utils';
 import useSetting from '../components/use-setting';
+// @TODO move this to a common lib and export.
+import { getTypographyFontSizeValue } from '../../../edit-site/src/components/global-styles/typography-utils';
 
 export const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
 
@@ -117,16 +119,27 @@ export function FontSizeEdit( props ) {
 		setAttributes,
 	} = props;
 	const fontSizes = useSetting( 'typography.fontSizes' );
+	const isFluidTypographyEnabled = useSetting( 'typography.fluid' );
 
 	const onChange = ( value ) => {
 		const fontSizeSlug = getFontSizeObjectByValue( fontSizes, value ).slug;
+		let fontSizeValue;
+		if (
+			isFluidTypographyEnabled &&
+			typeof style?.typography?.fontSize === 'string'
+		) {
+			fontSizeValue = getTypographyFontSizeValue(
+				{ size: style?.typography?.fontSize },
+				{ fluid: isFluidTypographyEnabled }
+			);
+		}
 
 		setAttributes( {
 			style: cleanEmptyObject( {
 				...style,
 				typography: {
 					...style?.typography,
-					fontSize: fontSizeSlug ? undefined : value,
+					fontSize: fontSizeSlug ? undefined : fontSizeValue || value,
 				},
 			} ),
 			fontSize: fontSizeSlug,
@@ -215,12 +228,42 @@ export function useIsFontSizeDisabled( { name: blockName } = {} ) {
 const withFontSizeInlineStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
 		const fontSizes = useSetting( 'typography.fontSizes' );
+		const isFluidTypographyEnabled = useSetting( 'typography.fluid' );
 		const {
 			name: blockName,
 			attributes: { fontSize, style },
 			wrapperProps,
 		} = props;
-
+		console.log(
+			'what? hasBlockSupport',
+			hasBlockSupport( blockName, FONT_SIZE_SUPPORT_KEY )
+		);
+		console.log(
+			'what? isFluidTypographyEnabled',
+			isFluidTypographyEnabled
+		);
+		let fontSizeValue;
+		let newProps = props;
+		if (
+			isFluidTypographyEnabled &&
+			typeof style?.typography?.fontSize === 'string'
+		) {
+			fontSizeValue = getTypographyFontSizeValue(
+				{ size: style?.typography?.fontSize },
+				{ fluid: isFluidTypographyEnabled }
+			);
+			newProps = {
+				...props,
+				wrapperProps: {
+					...wrapperProps,
+					style: {
+						fontSize: fontSizeValue,
+						...wrapperProps?.style,
+					},
+				},
+			};
+		}
+console.log( 'fontSizeValue 1', fontSizeValue );
 		// Only add inline styles if the block supports font sizes,
 		// doesn't skip serialization of font sizes,
 		// doesn't already have an inline font size,
@@ -235,16 +278,19 @@ const withFontSizeInlineStyles = createHigherOrderComponent(
 			! fontSize ||
 			style?.typography?.fontSize
 		) {
-			return <BlockListBlock { ...props } />;
+			return <BlockListBlock { ...newProps } />;
 		}
 
-		const fontSizeValue = getFontSize(
-			fontSizes,
-			fontSize,
-			style?.typography?.fontSize
-		).size;
-
-		const newProps = {
+		// @TODO Should be getFontSize()?
+		if ( ! isFluidTypographyEnabled ) {
+			fontSizeValue = getFontSize(
+				fontSizes,
+				fontSize,
+				style?.typography?.fontSize
+			).size;
+		}
+		console.log( 'fontSizeValue 2', fontSizeValue );
+		newProps = {
 			...props,
 			wrapperProps: {
 				...wrapperProps,
diff --git a/packages/edit-site/src/components/global-styles/typography-utils.js b/packages/edit-site/src/components/global-styles/typography-utils.js
index 464021dfa0b9fc..1c4b6e028cbf98 100644
--- a/packages/edit-site/src/components/global-styles/typography-utils.js
+++ b/packages/edit-site/src/components/global-styles/typography-utils.js
@@ -23,7 +23,7 @@
 export function getTypographyFontSizeValue( preset, typographySettings ) {
 	const { size: defaultSize } = preset;
 
-	if ( true !== typographySettings?.fluid ) {
+	if ( true !== typographySettings?.fluid || ! defaultSize ) {
 		return defaultSize;
 	}
 
diff --git a/test/emptytheme/theme.json b/test/emptytheme/theme.json
index ed2d7b8d0946aa..bd5b8eda3428d6 100644
--- a/test/emptytheme/theme.json
+++ b/test/emptytheme/theme.json
@@ -2,6 +2,9 @@
 	"version": 2,
 	"settings": {
 		"appearanceTools": true,
+		"typography": {
+			"fluid": true
+		},
 		"layout": {
 			"contentSize": "840px",
 			"wideSize": "1100px"