From cf0f7a08d891da33bb482cb84ef845b8ac580d90 Mon Sep 17 00:00:00 2001
From: Matias Benedetto <matias.benedetto@gmail.com>
Date: Tue, 26 Sep 2023 21:04:31 -0300
Subject: [PATCH] Fix the install of system fonts from a font collection
 (#54713)

---
 .../collection-font-details.js                 |  2 +-
 .../font-library-modal/context.js              | 18 ++++++++++--------
 .../font-library-modal/utils/fonts-outline.js  |  7 ++++---
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-details.js b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-details.js
index 4da9cf0713b19..de0c1cfa16ec6 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-details.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-details.js
@@ -42,7 +42,7 @@ function CollectionFontDetails( {
 						handleToggleVariant={ handleToggleVariant }
 						selected={ isFontFontFaceInOutline(
 							font.slug,
-							face,
+							font.fontFace ? face : null, // If the font has no fontFace, we want to check if the font is in the outline
 							fontToInstallOutline
 						) }
 					/>
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/context.js b/packages/edit-site/src/components/global-styles/font-library-modal/context.js
index eb5d56e8b4c9b..3abc0576863ee 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/context.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/context.js
@@ -281,14 +281,16 @@ function FontLibraryProvider( { children } ) {
 		} );
 		// Add custom fonts to the browser.
 		fontsToAdd.forEach( ( font ) => {
-			font.fontFace.forEach( ( face ) => {
-				// Load font faces just in the iframe because they already are in the document.
-				loadFontFaceInBrowser(
-					face,
-					getDisplaySrcFromFontFace( face.src ),
-					'iframe'
-				);
-			} );
+			if ( font.fontFace ) {
+				font.fontFace.forEach( ( face ) => {
+					// Load font faces just in the iframe because they already are in the document.
+					loadFontFaceInBrowser(
+						face,
+						getDisplaySrcFromFontFace( face.src ),
+						'iframe'
+					);
+				} );
+			}
 		} );
 	};
 
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/fonts-outline.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/fonts-outline.js
index 0414681a432ad..bef9353e94350 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/fonts-outline.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/fonts-outline.js
@@ -15,7 +15,8 @@ export function getFontsOutline( fonts ) {
 }
 
 export function isFontFontFaceInOutline( slug, face, outline ) {
-	return (
-		outline[ slug ]?.[ `${ face.fontStyle }-${ face.fontWeight }` ] || false
-	);
+	if ( ! face ) {
+		return !! outline[ slug ];
+	}
+	return !! outline[ slug ]?.[ `${ face.fontStyle }-${ face.fontWeight }` ];
 }