diff --git a/packages/edit-site/src/components/global-styles/screen-typeset.js b/packages/edit-site/src/components/global-styles/screen-typeset.js
index f146844c1447c2..85cb17c8194648 100644
--- a/packages/edit-site/src/components/global-styles/screen-typeset.js
+++ b/packages/edit-site/src/components/global-styles/screen-typeset.js
@@ -2,6 +2,8 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
 import { __experimentalVStack as VStack } from '@wordpress/components';
 
 /**
@@ -9,21 +11,29 @@ import { __experimentalVStack as VStack } from '@wordpress/components';
  */
 import TypographyVariations from './variations/variations-typography';
 import ScreenHeader from './header';
-import Typeset from './typeset';
+import FontFamilies from './font-families';
 
 function ScreenTypeset() {
+	const fontLibraryEnabled = useSelect(
+		( select ) =>
+			select( editorStore ).getEditorSettings().fontLibraryEnabled,
+		[]
+	);
+
 	return (
 		<>
 			<ScreenHeader
 				title={ __( 'Typesets' ) }
 				description={ __(
-					'Font pairings and typographic styling applied across the site.'
+					'Fonts and typographic styling applied across the site.'
 				) }
 			/>
 			<div className="edit-site-global-styles-screen">
 				<VStack spacing={ 7 }>
-					<Typeset />
-					<TypographyVariations title={ __( 'Presets' ) } />
+					<TypographyVariations />
+
+					{ ! window.__experimentalDisableFontLibrary &&
+						fontLibraryEnabled && <FontFamilies /> }
 				</VStack>
 			</div>
 		</>
diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
index 70136e68fcff43..3e6076ae7ff243 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -3,24 +3,15 @@
  */
 import { __ } from '@wordpress/i18n';
 import { __experimentalVStack as VStack } from '@wordpress/components';
-import { store as editorStore } from '@wordpress/editor';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import TypographyElements from './typography-elements';
-import FontFamilies from './font-families';
 import ScreenHeader from './header';
 import TypesetButton from './typeset-button';
 
 function ScreenTypography() {
-	const fontLibraryEnabled = useSelect(
-		( select ) =>
-			select( editorStore ).getEditorSettings().fontLibraryEnabled,
-		[]
-	);
-
 	return (
 		<>
 			<ScreenHeader
@@ -32,8 +23,6 @@ function ScreenTypography() {
 			<div className="edit-site-global-styles-screen">
 				<VStack spacing={ 7 }>
 					<TypesetButton />
-					{ ! window.__experimentalDisableFontLibrary &&
-						fontLibraryEnabled && <FontFamilies /> }
 					<TypographyElements />
 				</VStack>
 			</div>
diff --git a/packages/edit-site/src/components/global-styles/typeset-button.js b/packages/edit-site/src/components/global-styles/typeset-button.js
index 4c08f08a411d8e..eaf0e24dfccace 100644
--- a/packages/edit-site/src/components/global-styles/typeset-button.js
+++ b/packages/edit-site/src/components/global-styles/typeset-button.js
@@ -47,7 +47,7 @@ function TypesetButton() {
 						<HStack direction="row">
 							<FlexItem>
 								{ allFontFamilies
-									.map( ( font ) => font.name )
+									.map( ( font ) => font?.name )
 									.join( ', ' ) }
 							</FlexItem>
 							<Icon
diff --git a/packages/edit-site/src/components/global-styles/typeset.js b/packages/edit-site/src/components/global-styles/typeset.js
index f4cadf03b96ce6..e99e6a037500ad 100644
--- a/packages/edit-site/src/components/global-styles/typeset.js
+++ b/packages/edit-site/src/components/global-styles/typeset.js
@@ -47,12 +47,18 @@ function Typesets() {
 
 				<VStack spacing={ 2 }>
 					<HStack justify="space-between">
-						<Subtitle level={ 3 }>{ __( 'Typeset' ) }</Subtitle>
+						<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
 					</HStack>
 					<ItemGroup isBordered isSeparated>
-						{ allFontFamilies.map( ( font ) => (
-							<FontFamilyItem key={ font.slug } font={ font } />
-						) ) }
+						{ allFontFamilies.map(
+							( font ) =>
+								font && (
+									<FontFamilyItem
+										key={ font.slug }
+										font={ font }
+									/>
+								)
+						) }
 					</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 6096b381fb2187..34d2ffe4cfb969 100644
--- a/packages/edit-site/src/components/global-styles/utils.js
+++ b/packages/edit-site/src/components/global-styles/utils.js
@@ -52,7 +52,15 @@ function getFontFamilyFromSetting( fontFamilies, setting ) {
 }
 
 export function getFontFamilies( themeJson ) {
-	const fontFamilies = themeJson?.settings?.typography?.fontFamilies?.theme; // TODO this could not be under theme.
+	const themeFontFamilies =
+		themeJson?.settings?.typography?.fontFamilies?.theme;
+	const customFontFamilies =
+		themeJson?.settings?.typography?.fontFamilies?.custom;
+
+	let fontFamilies = themeFontFamilies;
+	if ( customFontFamilies ) {
+		fontFamilies = [ ...themeFontFamilies, ...customFontFamilies ];
+	}
 	const bodyFontFamilySetting = themeJson?.styles?.typography?.fontFamily;
 	const bodyFontFamily = getFontFamilyFromSetting(
 		fontFamilies,