From 533fd471e6f5b4ef9fe404e732575ebec9568de7 Mon Sep 17 00:00:00 2001 From: Vicente Canales Date: Sun, 10 Sep 2023 17:43:12 -0300 Subject: [PATCH] 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: https://github.com/WordPress/gutenberg/issues/51764 --- .../global-styles/font-library-modal/local-fonts.js | 5 +++++ 1 file changed, 5 insertions(+) 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 index 12b1b19e6d30b8..5a92b0f484f1b7 100644 --- 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 @@ -114,6 +114,10 @@ function LocalFonts() { }; 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, @@ -121,6 +125,7 @@ function LocalFonts() { } ); const loadedFace = await newFont.load(); document.fonts.add( loadedFace ); + iframeDocument.fonts.add( loadedFace ); }; /**