diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
index b6f8dc46aa564..cf6857b30c59e 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -25,6 +25,7 @@ import {
DropdownMenu,
SearchControl,
ProgressBar,
+ CheckboxControl,
} from '@wordpress/components';
import { debounce } from '@wordpress/compose';
import { sprintf, __, _x } from '@wordpress/i18n';
@@ -175,6 +176,25 @@ function FontCollection( { slug } ) {
setFontsToInstall( [] );
};
+ const selectFontCount =
+ fontsToInstall.length > 0 ? fontsToInstall[ 0 ]?.fontFace?.length : 0;
+
+ // Check if any fonts are selected.
+ const isIndeterminate =
+ selectFontCount > 0 &&
+ selectFontCount !== selectedFont?.fontFace?.length;
+
+ // Check if all fonts are selected.
+ const isSelectAllChecked =
+ selectFontCount === selectedFont?.fontFace?.length;
+
+ // Toggle select all fonts.
+ const toggleSelectAll = () => {
+ const newFonts = isSelectAllChecked ? [] : [ selectedFont ];
+
+ setFontsToInstall( newFonts );
+ };
+
const handleInstall = async () => {
setNotice( null );
@@ -400,6 +420,14 @@ function FontCollection( { slug } ) {
{ __( 'Select font variants to install.' ) }
+
{ getSortedFontFaces( selectedFont ).map(
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
index 5cbb53a6296cc..10b5b816cb9bd 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -194,4 +194,3 @@ button.font-library-modal__upload-area {
padding-left: $grid-unit-20;
}
}
-