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 9612f8be52f5e..4030dcfb69a77 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
@@ -11,6 +11,7 @@ import {
 	FormFileUpload,
 	Notice,
 	FlexItem,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useContext, useState, useEffect } from '@wordpress/element';
 
@@ -23,10 +24,14 @@ import { Font } from '../../../../lib/lib-font.browser';
 import makeFamiliesFromFaces from './utils/make-families-from-faces';
 import { loadFontFaceInBrowser } from './utils';
 import { getNoticeFromInstallResponse } from './utils/get-notice-from-response';
+import { unlock } from '../../../lock-unlock';
+
+const { ProgressBar } = unlock( componentsPrivateApis );
 
 function LocalFonts() {
 	const { installFonts } = useContext( FontLibraryContext );
 	const [ notice, setNotice ] = useState( null );
+	const [ isUploading, setIsUploading ] = useState( false );
 	const supportedFormats =
 		ALLOWED_FILE_EXTENSIONS.slice( 0, -1 )
 			.map( ( extension ) => `.${ extension }` )
@@ -58,6 +63,7 @@ function LocalFonts() {
 	 */
 	const handleFilesUpload = ( files ) => {
 		setNotice( null );
+		setIsUploading( true );
 		const uniqueFilenames = new Set();
 		const selectedFiles = [ ...files ];
 		const allowedFiles = selectedFiles.filter( ( file ) => {
@@ -150,6 +156,7 @@ function LocalFonts() {
 		const response = await installFonts( fontFamilies );
 		const installNotice = getNoticeFromInstallResponse( response );
 		setNotice( installNotice );
+		setIsUploading( false );
 	};
 
 	return (
@@ -157,31 +164,28 @@ function LocalFonts() {
 			<Spacer margin={ 16 } />
 			<DropZone onFilesDrop={ handleDropZone } />
 			<VStack className="font-library-modal__local-fonts">
-				<FormFileUpload
-					accept={ ALLOWED_FILE_EXTENSIONS.map(
-						( ext ) => `.${ ext }`
-					).join( ',' ) }
-					multiple={ true }
-					onChange={ onFilesUpload }
-					render={ ( { openFileDialog } ) => (
-						<Button
-							className="font-library-modal__upload-area"
-							onClick={ openFileDialog }
-						>
-							<span>{ __( 'Upload font' ) }</span>
-						</Button>
-					) }
-				/>
-				{ notice && (
+				{ ! isUploading && (
+					<FormFileUpload
+						accept={ ALLOWED_FILE_EXTENSIONS.map(
+							( ext ) => `.${ ext }`
+						).join( ',' ) }
+						multiple={ true }
+						onChange={ onFilesUpload }
+						render={ ( { openFileDialog } ) => (
+							<Button
+								className="font-library-modal__upload-area"
+								onClick={ openFileDialog }
+							>
+								<span>{ __( 'Upload font' ) }</span>
+							</Button>
+						) }
+					/>
+				) }
+				{ isUploading && (
 					<FlexItem>
-						<Spacer margin={ 2 } />
-						<Notice
-							isDismissible={ false }
-							status={ notice.type }
-							className="font-library-modal__upload-area__notice"
-						>
-							{ notice.message }
-						</Notice>
+						<div className="font-library-modal__upload-area">
+							<ProgressBar />
+						</div>
 					</FlexItem>
 				) }
 				<Spacer margin={ 2 } />
@@ -194,6 +198,18 @@ function LocalFonts() {
 						supportedFormats
 					) }
 				</Text>
+				{ ! isUploading && notice && (
+					<FlexItem>
+						<Spacer margin={ 2 } />
+						<Notice
+							isDismissible={ false }
+							status={ notice.type }
+							className="font-library-modal__upload-area__notice"
+						>
+							{ notice.message }
+						</Notice>
+					</FlexItem>
+				) }
 			</VStack>
 		</>
 	);
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 86cac4244dea9..4af4d238afa90 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
@@ -94,6 +94,9 @@
 	justify-content: center;
 	height: 250px;
 	width: 100%;
+}
+
+button.font-library-modal__upload-area {
 	background-color: #f0f0f0;
 }