Font Library: Fix font loading for uploaded fonts with names of more than one word.

packages/edit-site/src/components/global-styles/font-library-modal/context.js

@@ -263,28 +263,29 @@ function FontLibraryProvider( { children } ) {
 			}
 
 			// Install the fonts (upload the font files to the server and create the post in the database).
-			let sucessfullyInstalledFontFaces = [];
-			let unsucessfullyInstalledFontFaces = [];
+			let successfullyInstalledFontFaces = [];
+			let unsuccessfullyInstalledFontFaces = [];
 			if ( fontFamilyToInstall?.fontFace?.length > 0 ) {
 				const response = await batchInstallFontFaces(
 					installedFontFamily.id,
 					makeFontFacesFormData( fontFamilyToInstall )
 				);
-				sucessfullyInstalledFontFaces = response?.successes;
-				unsucessfullyInstalledFontFaces = response?.errors;
+				successfullyInstalledFontFaces = response?.successes;
+				unsuccessfullyInstalledFontFaces = response?.errors;
 			}
 
-			const detailedErrorMessage = unsucessfullyInstalledFontFaces.reduce(
-				( errorMessageCollection, error ) => {
-					return `${ errorMessageCollection } ${ error.message }`;
-				},
-				''
-			);
+			const detailedErrorMessage =
+				unsuccessfullyInstalledFontFaces.reduce(
+					( errorMessageCollection, error ) => {
+						return `${ errorMessageCollection } ${ error.message }`;
+					},
+					''
+				);
 
 			// If there were no successes and nothing already installed then we don't need to activate anything and can bounce now.
 			if (
 				fontFamilyToInstall?.fontFace?.length > 0 &&
-				sucessfullyInstalledFontFaces.length === 0 &&
+				successfullyInstalledFontFaces.length === 0 &&
 				alreadyInstalledFontFaces.length === 0
 			) {
 				throw new Error(
@@ -296,14 +297,14 @@ function FontLibraryProvider( { children } ) {
 				);
 			}
 
-			// Use the sucessfully installed font faces
+			// Use the successfully installed font faces
 			// As well as any font faces that were already installed (those will be activated)
 			if (
-				sucessfullyInstalledFontFaces?.length > 0 ||
+				successfullyInstalledFontFaces?.length > 0 ||
 				alreadyInstalledFontFaces?.length > 0
 			) {
 				fontFamilyToInstall.fontFace = [
-					...sucessfullyInstalledFontFaces,
+					...successfullyInstalledFontFaces,
 					...alreadyInstalledFontFaces,
 				];
 			}
@@ -318,7 +319,7 @@ function FontLibraryProvider( { children } ) {
 
 			refreshLibrary();
 
-			if ( unsucessfullyInstalledFontFaces.length > 0 ) {
+			if ( unsuccessfullyInstalledFontFaces.length > 0 ) {
 				throw new Error(
 					sprintf(
 						/* translators: %s: Specific error message returned from server. */
@@ -397,11 +398,11 @@ function FontLibraryProvider( { children } ) {
 		fontsToAdd.forEach( ( font ) => {
 			if ( font.fontFace ) {
 				font.fontFace.forEach( ( face ) => {
-					// Load font faces just in the iframe because they already are in the document.
+					// Load font face in the browser.
 					loadFontFaceInBrowser(
 						face,
 						getDisplaySrcFromFontFace( face.src ),
-						'iframe'
+						'all'
 					);
 				} );
 			}

packages/edit-site/src/components/global-styles/font-library-modal/utils/preview-styles.js

@@ -31,21 +31,25 @@ function extractFontWeights( fontFaces ) {
 }
 
 export function formatFontFamily( input ) {
-	return input
-		.split( ',' )
-		.map( ( font ) => {
-			font = font.trim(); // Remove any leading or trailing white spaces
-			// If the font doesn't start with quotes and contains a space, then wrap in quotes.
-			// Check that string starts with a single or double quote and not a space
-			if (
-				! ( font.startsWith( '"' ) || font.startsWith( "'" ) ) &&
-				font.indexOf( ' ' ) !== -1
-			) {
-				return `"${ font }"`;
-			}
-			return font; // Return font as is if no transformation is needed
-		} )
-		.join( ', ' );
+	return input.includes( ',' )
+		? input
+				.split( ',' )
+				.map( ( font ) => {
+					font = font.trim(); // Remove any leading or trailing white spaces
+					// If the font doesn't start with quotes and contains a space, then wrap in quotes.
+					// Check that string starts with a single or double quote and not a space
+					if (
+						! (
+							font.startsWith( '"' ) || font.startsWith( "'" )
+						) &&
+						font.indexOf( ' ' ) !== -1
+					) {
+						return `"${ font }"`;
+					}
+					return font; // Return font as is if no transformation is needed
+				} )
+				.join( ', ' )
+		: input.replace( /"/g, '' );
 }
 
 export function getFamilyPreviewStyle( family ) {

packages/edit-site/src/components/global-styles/font-library-modal/utils/test/preview-styles.spec.js

@@ -143,8 +143,8 @@ describe( 'formatFontFamily', () => {
 		);
 	} );
 
-	it( 'should wrap single font name with spaces in quotes', () => {
-		expect( formatFontFamily( 'Baloo 2' ) ).toBe( '"Baloo 2"' );
+	it( 'should not add quotes to single font name with spaces', () => {
+		expect( formatFontFamily( 'Baloo 2' ) ).toBe( 'Baloo 2' );
 	} );
 
 	it( 'should wrap multiple font names with spaces in quotes', () => {