Font library: load font assets on editor canvas (#54334)

* Font library: load font assets on editor canvas

This change adds loaded font faces to the editor canvas iframe so that they can be used immediately after uploading them.

Re: #51764

* load font families on iframe on activation

* removing addFontFaceToBrowser function and consolidate it with loadFontFaceInBrowser that was doing almost the same

---------

Co-authored-by: Matias Benedetto <matias.benedetto@gmail.com>

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

@@ -283,6 +283,17 @@ function FontLibraryProvider( { children } ) {
 			...fontFamilies,
 			custom: newCustomFonts,
 		} );
+		// 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'
+				);
+			} );
+		} );
 	};
 
 	const toggleActivateFont = ( font, face ) => {
@@ -306,7 +317,7 @@ function FontLibraryProvider( { children } ) {
 		// If the font is already loaded, don't load it again.
 		if ( loadedFontUrls.has( src ) ) return;
 		// Load the font in the browser.
-		loadFontFaceInBrowser( fontFace, src );
+		loadFontFaceInBrowser( fontFace, src, 'document' );
 		// Add the font to the loaded fonts list.
 		loadedFontUrls.add( src );
 	};

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

@@ -18,6 +18,7 @@ import { ALLOWED_FILE_EXTENSIONS } from './utils/constants';
 import { FontLibraryContext } from './context';
 import { Font } from '../../../../lib/lib-font.browser';
 import makeFamiliesFromFaces from './utils/make-families-from-faces';
+import { loadFontFaceInBrowser } from './utils';
 
 function LocalFonts() {
 	const { installFonts } = useContext( FontLibraryContext );
@@ -65,7 +66,11 @@ function LocalFonts() {
 		const fontFacesLoaded = await Promise.all(
 			files.map( async ( fontFile ) => {
 				const fontFaceData = await getFontFaceMetadata( fontFile );
-				await addFontFaceToBrowser( fontFaceData );
+				await loadFontFaceInBrowser(
+					fontFaceData,
+					fontFaceData.file,
+					'all'
+				);
 				return fontFaceData;
 			} )
 		);
@@ -113,16 +118,6 @@ function LocalFonts() {
 		};
 	};
 
-	const addFontFaceToBrowser = async ( fontFaceData ) => {
-		const data = await fontFaceData.file.arrayBuffer();
-		const newFont = new window.FontFace( fontFaceData.fontFamily, data, {
-			style: fontFaceData.fontStyle,
-			weight: fontFaceData.fontWeight,
-		} );
-		const loadedFace = await newFont.load();
-		document.fonts.add( loadedFace );
-	};
-
 	/**
 	 * Creates the font family definition and sends it to the server
 	 *

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

@@ -74,14 +74,38 @@ export function mergeFontFamilies( existing = [], incoming = [] ) {
 	return Array.from( map.values() );
 }
 
-export async function loadFontFaceInBrowser( fontFace, src ) {
+/*
+ * Loads the font face from a URL and adds it to the browser.
+ * It also adds it to the iframe document.
+ */
+export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) {
+	let dataSource;
+
+	if ( typeof source === 'string' ) {
+		dataSource = `url(${ source })`;
+		// eslint-disable-next-line no-undef
+	} else if ( source instanceof File ) {
+		dataSource = await source.arrayBuffer();
+	}
+
 	// eslint-disable-next-line no-undef
-	const newFont = new FontFace( fontFace.fontFamily, `url( ${ src } )`, {
+	const newFont = new FontFace( fontFace.fontFamily, dataSource, {
 		style: fontFace.fontStyle,
 		weight: fontFace.fontWeight,
 	} );
+
 	const loadedFace = await newFont.load();
-	document.fonts.add( loadedFace );
+
+	if ( addTo === 'document' || addTo === 'all' ) {
+		document.fonts.add( loadedFace );
+	}
+
+	if ( addTo === 'iframe' || addTo === 'all' ) {
+		const iframeDocument = document.querySelector(
+			'iframe[name="editor-canvas"]'
+		).contentDocument;
+		iframeDocument.fonts.add( loadedFace );
+	}
 }
 
 export function getDisplaySrcFromFontFace( input, urlPrefix ) {