Fix the install of system fonts from a font collection (#54713)

WordPress · Sep 27, 2023 · cf0f7a0 · cf0f7a0
1 parent be69ef4
commit cf0f7a0
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/...ages/edit-site/src/components/global-styles/font-library-modal/collection-font-details.js b/...ages/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
@@ -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
@@ -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 }` ];
 }