Font Library: Load/Unload the font face in browser when toggling the …

…variants

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

@@ -27,6 +27,7 @@ import {
 	setUIValuesNeeded,
 	mergeFontFamilies,
 	loadFontFaceInBrowser,
+	unloadFontFaceInBrowser,
 	getDisplaySrcFromFontFace,
 	makeFontFacesFormData,
 	makeFontFamilyFormData,
@@ -410,6 +411,23 @@ function FontLibraryProvider( { children } ) {
 			...fontFamilies,
 			[ font.source ]: newFonts,
 		} );
+
+		const activatedFont = newFonts.find( ( f ) => f.slug === font.slug );
+		const isFaceActivated = activatedFont?.fontFace?.find(
+			( f ) =>
+				f.fontWeight === face.fontWeight &&
+				f.fontStyle === face.fontStyle
+		);
+		if ( isFaceActivated ) {
+			// Load font faces just in the iframe because they already are in the document.
+			loadFontFaceInBrowser(
+				face,
+				getDisplaySrcFromFontFace( face.src ),
+				'all'
+			);
+		} else {
+			unloadFontFaceInBrowser( face, 'all' );
+		}
 	};
 
 	const loadFontFaceAsset = async ( fontFace ) => {

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

@@ -121,6 +121,38 @@ export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) {
 	}
 }
 
+/*
+ * Unloads the font face and remove it from the browser.
+ * It also removes it from the iframe document.
+ *
+ * Note that Font faces that were added to the set using the CSS @font-face rule
+ * remain connected to the corresponding CSS, and cannot be deleted.
+ */
+export function unloadFontFaceInBrowser( fontFace, addTo = 'all' ) {
+	const unloadFontFace = ( fonts ) => {
+		fonts.forEach( ( f ) => {
+			if (
+				f.family === fontFace.fontFamily &&
+				f.weight === fontFace.fontWeight &&
+				f.style === fontFace.fontStyle
+			) {
+				fonts.delete( f );
+			}
+		} );
+	};
+
+	if ( addTo === 'document' || addTo === 'all' ) {
+		unloadFontFace( document.fonts );
+	}
+
+	if ( addTo === 'iframe' || addTo === 'all' ) {
+		const iframeDocument = document.querySelector(
+			'iframe[name="editor-canvas"]'
+		).contentDocument;
+		unloadFontFace( iframeDocument.fonts );
+	}
+}
+
 export function getDisplaySrcFromFontFace( input, urlPrefix ) {
 	if ( ! input ) {
 		return;