From aa0b118c8063e49db847dc81c00b72e5131d3eb2 Mon Sep 17 00:00:00 2001
From: Jason Crist <jcrist@pbking.com>
Date: Fri, 23 Feb 2024 09:34:08 -0500
Subject: [PATCH] Returned selected font heading to use Heading instead of Font
 Demo

---
 .../font-library-modal/font-collection.js              |  9 +++++++--
 .../font-library-modal/installed-fonts.js              | 10 ++++++++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
index e744cdb87fc69..f60bd87dd4a02 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -46,7 +46,6 @@ import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';
 import { downloadFontFaceAssets } from './utils';
 import { sortFontFaces } from './utils/sort-font-faces';
 import CollectionFontVariant from './collection-font-variant';
-import FontDemo from './font-demo';
 
 const DEFAULT_CATEGORY = {
 	slug: 'all',
@@ -358,7 +357,13 @@ function FontCollection( { slug } ) {
 							} }
 							aria-label={ __( 'Navigate to the previous view' ) }
 						/>
-						<FontDemo font={ selectedFont } />
+						<Heading
+							level={ 2 }
+							size={ 13 }
+							className="edit-site-global-styles-header"
+						>
+							{ selectedFont?.name }
+						</Heading>
 					</Flex>
 					{ notice && (
 						<>
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
index 617d1c17cc0ab..a72b7d59d150c 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
@@ -5,6 +5,7 @@ import {
 	Button,
 	__experimentalConfirmDialog as ConfirmDialog,
 	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
 	__experimentalNavigatorProvider as NavigatorProvider,
 	__experimentalNavigatorScreen as NavigatorScreen,
 	__experimentalNavigatorToParentButton as NavigatorToParentButton,
@@ -26,7 +27,6 @@ import { chevronLeft } from '@wordpress/icons';
  */
 import { unlock } from '../../../lock-unlock';
 import { FontLibraryContext } from './context';
-import FontDemo from './font-demo';
 import FontCard from './font-card';
 import LibraryFontVariant from './library-font-variant';
 import { sortFontFaces } from './utils/sort-font-faces';
@@ -185,7 +185,13 @@ function InstalledFonts() {
 							} }
 							aria-label={ __( 'Navigate to the previous view' ) }
 						/>
-						<FontDemo font={ libraryFontSelected } />
+						<Heading
+							level={ 2 }
+							size={ 13 }
+							className="edit-site-global-styles-header"
+						>
+							{ libraryFontSelected?.name }
+						</Heading>
 					</Flex>
 					{ notice && (
 						<>