Skip to content

Commit

Permalink
Font Library: Load/Unload the font face in browser when toggling the …
Browse files Browse the repository at this point in the history
…variants (#59066)

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

* Font Library: Unload the deleted font faces

* Address feedback

* replace repeated implementation by the use of a existing fuction

* remove inaccurate comment

* added a formatFontFace call to be able to match fonts in firefox too.

---------

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

---
Co-authored-by: arthur791004 <arthur791004@git.wordpress.org>
Co-authored-by: matiasbenedetto <mmaattiiaass@git.wordpress.org>
Co-authored-by: okmttdhr <okat@git.wordpress.org>
  • Loading branch information
5 people authored and getdave committed Mar 12, 2024
1 parent d932de2 commit 693b8bc
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
setUIValuesNeeded,
mergeFontFamilies,
loadFontFaceInBrowser,
unloadFontFaceInBrowser,
getDisplaySrcFromFontFace,
makeFontFacesFormData,
makeFontFamilyFormData,
Expand Down Expand Up @@ -363,6 +364,12 @@ function FontLibraryProvider( { children } ) {
...fontFamilies,
[ font.source ]: newCustomFonts,
} );

if ( font.fontFace ) {
font.fontFace.forEach( ( face ) => {
unloadFontFaceInBrowser( face, 'all' );
} );
}
};

const activateCustomFontFamilies = ( fontsToAdd ) => {
Expand Down Expand Up @@ -398,6 +405,23 @@ function FontLibraryProvider( { children } ) {
...fontFamilies,
[ font.source ]: newFonts,
} );

const isFaceActivated = isFontActivated(
font.slug,
face.fontStyle,
face.fontWeight,
font.source
);

if ( isFaceActivated ) {
loadFontFaceInBrowser(
face,
getDisplaySrcFromFontFace( face.src ),
'all'
);
} else {
unloadFontFaceInBrowser( face, 'all' );
}
};

const loadFontFaceAsset = async ( fontFace ) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,40 @@ 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.
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/delete.
*/
export function unloadFontFaceInBrowser( fontFace, removeFrom = 'all' ) {
const unloadFontFace = ( fonts ) => {
fonts.forEach( ( f ) => {
if (
f.family === formatFontFaceName( fontFace.fontFamily ) &&
f.weight === fontFace.fontWeight &&
f.style === fontFace.fontStyle
) {
fonts.delete( f );
}
} );
};

if ( removeFrom === 'document' || removeFrom === 'all' ) {
unloadFontFace( document.fonts );
}

if ( removeFrom === 'iframe' || removeFrom === 'all' ) {
const iframeDocument = document.querySelector(
'iframe[name="editor-canvas"]'
).contentDocument;
unloadFontFace( iframeDocument.fonts );
}
}

/**
* Retrieves the display source from a font face src.
*
Expand Down

0 comments on commit 693b8bc

Please sign in to comment.