removing addFontFaceToBrowser function and consolidate it with loadFo…

…ntFaceInBrowser that was doing almost the same
WordPress · Sep 11, 2023 · 7c3eef1 · 7c3eef1
1 parent f2270eb
commit 7c3eef1
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 28 deletions.
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
@@ -286,9 +286,11 @@ 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 )
+					getDisplaySrcFromFontFace( face.src ),
+					'iframe'
 				);
 			} );
 		} );
@@ -315,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 );
 	};

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js b/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,23 +118,6 @@ function LocalFonts() {
 		};
 	};
 
-	/* Loads the font face to the browser from the file as an arrayBuffer
-	 * and adds it to the document and iframe document */
-	const addFontFaceToBrowser = async ( fontFaceData ) => {
-		const editorCanvas = document.querySelector(
-			'iframe[name="editor-canvas"]'
-		);
-		const iframeDocument = editorCanvas.contentDocument;
-		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 );
-		iframeDocument.fonts.add( loadedFace );
-	};
-
 	/**
 	 * Creates the font family definition and sends it to the server
 	 *

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js
@@ -78,19 +78,34 @@ export function mergeFontFamilies( existing = [], incoming = [] ) {
  * 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, src ) {
-	const editorCanvas = document.querySelector(
-		'iframe[name="editor-canvas"]'
-	);
-	const iframeDocument = editorCanvas.contentDocument;
+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 );
-	iframeDocument.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 ) {