diff --git a/packages/edit-site/src/components/global-styles/typeset.js b/packages/edit-site/src/components/global-styles/typeset.js
deleted file mode 100644
index 31e0ffc2c9959a..00000000000000
--- a/packages/edit-site/src/components/global-styles/typeset.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useContext } from '@wordpress/element';
-import {
-	FlexItem,
-	__experimentalHStack as HStack,
-	__experimentalItemGroup as ItemGroup,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-import { __, _n } from '@wordpress/i18n';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { mergeBaseAndUserConfigs } from './global-styles-provider';
-import { unlock } from '../../lock-unlock';
-import { NavigationButtonAsItem } from './navigation-button';
-import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
-import Subtitle from './subtitle';
-import { filterObjectByProperty } from './utils';
-
-const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
-
-function getFontFamilyFromSetting( themeJson, setting ) {
-	const fontFamilyVariable = setting.replace( 'var(', '' ).replace( ')', '' );
-	const fontFamilySlug = fontFamilyVariable?.split( '--' ).slice( -1 )[ 0 ];
-
-	const fontFamilies = themeJson?.settings?.typography?.fontFamilies?.theme; // TODO this could not be under theme.
-
-	return fontFamilies.find(
-		( fontFamily ) => fontFamily.slug === fontFamilySlug
-	);
-}
-
-function getValuesFromObject( object, property, result = [] ) {
-	for ( const key in object ) {
-		if ( typeof object[ key ] === 'object' ) {
-			getValuesFromObject( object[ key ], property, result );
-		} else {
-			result.push( object[ key ] );
-		}
-	}
-	return result;
-}
-
-export default function Typeset() {
-	const { base, user } = useContext( GlobalStylesContext );
-
-	const themeJson = mergeBaseAndUserConfigs( base, user );
-
-	const fontFamilySettings = filterObjectByProperty(
-		themeJson.styles, // Don't need the stuff in settings.
-		'fontFamily'
-	);
-
-	const fontFamilyValuesFromThemeJson = getValuesFromObject(
-		fontFamilySettings,
-		'fontFamily'
-	);
-
-	const uniqueFontFamilies = Array.from(
-		new Set( fontFamilyValuesFromThemeJson ) // To remove duplicates.
-	).filter( ( value ) => value !== 'inherit' ); // To remove inherit.
-
-	const fontFamilies = uniqueFontFamilies.map( ( fontFamily ) =>
-		getFontFamilyFromSetting( themeJson, fontFamily )
-	);
-
-	const fontsCount = fontFamilies.length;
-	return (
-		<VStack spacing={ 3 }>
-			<Subtitle level={ 3 }>{ __( 'Typeset' ) }</Subtitle>
-			<ItemGroup className="edit-site-global-styles-screen-typography-typeset__button">
-				<NavigationButtonAsItem
-					path="/typography/typesets"
-					aria-label={ __( 'Typesets' ) }
-				>
-					<HStack justify="space-between">
-						<VStack>
-							{ fontFamilies.map( ( fontFamily ) => {
-								const style =
-									getFamilyPreviewStyle( fontFamily );
-								return (
-									<FlexItem
-										key={ fontFamily.slug }
-										style={ style }
-									>
-										{ fontFamily.name }
-									</FlexItem>
-								);
-							} ) }
-						</VStack>
-						<FlexItem style={ { color: '#9e9e9e' } }>
-							{ fontsCount } { _n( 'font', 'fonts', fontsCount ) }
-						</FlexItem>
-					</HStack>
-				</NavigationButtonAsItem>
-			</ItemGroup>
-		</VStack>
-	);
-}
diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js
index cab4e4cfe32e98..652a1ef22896c7 100644
--- a/packages/edit-site/src/components/global-styles/utils.js
+++ b/packages/edit-site/src/components/global-styles/utils.js
@@ -85,7 +85,12 @@ export const getVariationsByProperty = ( user, variations, property ) => {
 	);
 
 	const variationsWithOnlyProperty = variations.map( ( variation ) => {
-		return filterObjectByProperty( variation, property );
+		return {
+			...filterObjectByProperty( variation, property ),
+			// Add variation title and description to every variation item.
+			title: variation?.title,
+			description: variation?.description,
+		};
 	} );
 
 	return variationsWithOnlyProperty.map( ( variation ) =>
diff --git a/packages/edit-site/src/components/global-styles/variations-typography.js b/packages/edit-site/src/components/global-styles/variations-typography.js
index f9fc4f667a06ec..58f8f36056c5fb 100644
--- a/packages/edit-site/src/components/global-styles/variations-typography.js
+++ b/packages/edit-site/src/components/global-styles/variations-typography.js
@@ -119,10 +119,12 @@ function TypographyVariation( { variation } ) {
 	const [ bodyFontFamilies, headingFontFamilies ] = getFontFamilies(
 		mergeBaseAndUserConfigs( base, variation )
 	);
-
-	const bodyPreviewStyle = getFamilyPreviewStyle( bodyFontFamilies );
+	const bodyPreviewStyle = bodyFontFamilies
+		? getFamilyPreviewStyle( bodyFontFamilies )
+		: {};
 	const headingPreviewStyle = {
-		...getFamilyPreviewStyle( headingFontFamilies ),
+		...( headingFontFamilies &&
+			getFamilyPreviewStyle( headingFontFamilies ) ),
 		fontSize: '1.2rem',
 	};
 
@@ -154,10 +156,10 @@ function TypographyVariation( { variation } ) {
 					} }
 				>
 					<div style={ headingPreviewStyle }>
-						{ headingFontFamilies.name }
+						{ headingFontFamilies?.name || variation?.title }
 					</div>
 					<div style={ bodyPreviewStyle }>
-						{ bodyFontFamilies.name }
+						{ bodyFontFamilies?.name || __( 'Typeset' ) }
 					</div>
 				</VStack>
 			</div>
@@ -173,10 +175,8 @@ export default function TypographyVariations() {
 	}, [] );
 
 	const { base, user } = useContext( GlobalStylesContext );
-
 	const typographyVariations =
 		variations && getVariationsByProperty( user, variations, 'typography' );
-
 	const uniqueTypographyVariations = [];
 	const uniqueTypographyNames = [];
 	const isDup = ( x, y ) => {
@@ -204,15 +204,16 @@ export default function TypographyVariations() {
 				columns={ 2 }
 				className="edit-site-global-styles-style-variations-container"
 			>
-				{ uniqueTypographyVariations &&
-					uniqueTypographyVariations.map( ( variation, index ) => {
-						return (
-							<TypographyVariation
-								key={ index }
-								variation={ variation }
-							/>
-						);
-					} ) }
+				{ typographyVariations && typographyVariations.length
+					? uniqueTypographyVariations.map( ( variation, index ) => {
+							return (
+								<TypographyVariation
+									key={ index }
+									variation={ variation }
+								/>
+							);
+					  } )
+					: null }
 			</Grid>
 		</VStack>
 	);