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 4368d72645959..1a1853ac62a38 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
@@ -19,12 +19,12 @@ import {
 	__experimentalHeading as Heading,
 	Notice,
 	SelectControl,
-	Spinner,
 	FlexItem,
 	Flex,
 	Button,
 	DropdownMenu,
 	SearchControl,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { sprintf, __, _x } from '@wordpress/i18n';
@@ -45,6 +45,8 @@ import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';
 import { downloadFontFaceAssets } from './utils';
 import { sortFontFaces } from './utils/sort-font-faces';
 import CollectionFontVariant from './collection-font-variant';
+import { unlock } from '../../../lock-unlock';
+const { ProgressBar } = unlock( componentsPrivateApis );
 
 const DEFAULT_CATEGORY = {
 	slug: 'all',
@@ -136,6 +138,8 @@ function FontCollection( { slug } ) {
 		[ collectionFonts, filters ]
 	);
 
+	const isLoading = ! selectedCollection?.font_families && ! notice;
+
 	// NOTE: The height of the font library modal unavailable to use for rendering font family items is roughly 417px
 	// The height of each font family item is 61px.
 	const windowHeight = Math.max( window.innerHeight, MIN_WINDOW_HEIGHT );
@@ -260,235 +264,255 @@ function FontCollection( { slug } ) {
 
 	return (
 		<div className="font-library-modal__tabpanel-layout">
-			<NavigatorProvider
-				initialPath="/"
-				className="font-library-modal__tabpanel-layout"
-			>
-				<NavigatorScreen path="/">
-					<HStack justify="space-between">
-						<VStack>
-							<Heading level={ 2 } size={ 13 }>
-								{ selectedCollection.name }
-							</Heading>
-							<Text>{ selectedCollection.description }</Text>
-						</VStack>
-						<ActionsComponent />
-					</HStack>
-					<Spacer margin={ 4 } />
-					<Flex>
-						<FlexItem>
-							<SearchControl
-								className="font-library-modal__search"
-								value={ filters.search }
-								placeholder={ __( 'Font name…' ) }
-								label={ __( 'Search' ) }
-								onChange={ debouncedUpdateSearchInput }
-								__nextHasNoMarginBottom
-								hideLabelFromVision={ false }
-							/>
-						</FlexItem>
-						<FlexItem>
-							<SelectControl
-								label={ __( 'Category' ) }
-								value={ filters.category }
-								onChange={ handleCategoryFilter }
-							>
-								{ categories &&
-									categories.map( ( category ) => (
-										<option
-											value={ category.slug }
-											key={ category.slug }
-										>
-											{ category.name }
-										</option>
-									) ) }
-							</SelectControl>
-						</FlexItem>
-					</Flex>
-
-					<Spacer margin={ 4 } />
-
-					{ ! selectedCollection?.font_families && ! notice && (
-						<Spinner />
-					) }
+			{ isLoading && (
+				<div className="font-library-modal__loading">
+					<ProgressBar />
+				</div>
+			) }
 
-					{ !! selectedCollection?.font_families?.length &&
-						! fonts.length && (
-							<Text>
-								{ __(
-									'No fonts found. Try with a different search term'
+			{ ! isLoading && (
+				<>
+					<NavigatorProvider
+						initialPath="/"
+						className="font-library-modal__tabpanel-layout"
+					>
+						<NavigatorScreen path="/">
+							<HStack justify="space-between">
+								<VStack>
+									<Heading level={ 2 } size={ 13 }>
+										{ selectedCollection.name }
+									</Heading>
+									<Text>
+										{ selectedCollection.description }
+									</Text>
+								</VStack>
+								<ActionsComponent />
+							</HStack>
+							<Spacer margin={ 4 } />
+							<Flex>
+								<FlexItem>
+									<SearchControl
+										className="font-library-modal__search"
+										value={ filters.search }
+										placeholder={ __( 'Font name…' ) }
+										label={ __( 'Search' ) }
+										onChange={ debouncedUpdateSearchInput }
+										__nextHasNoMarginBottom
+										hideLabelFromVision={ false }
+									/>
+								</FlexItem>
+								<FlexItem>
+									<SelectControl
+										label={ __( 'Category' ) }
+										value={ filters.category }
+										onChange={ handleCategoryFilter }
+									>
+										{ categories &&
+											categories.map( ( category ) => (
+												<option
+													value={ category.slug }
+													key={ category.slug }
+												>
+													{ category.name }
+												</option>
+											) ) }
+									</SelectControl>
+								</FlexItem>
+							</Flex>
+
+							<Spacer margin={ 4 } />
+
+							{ !! selectedCollection?.font_families?.length &&
+								! fonts.length && (
+									<Text>
+										{ __(
+											'No fonts found. Try with a different search term'
+										) }
+									</Text>
 								) }
+
+							<div className="font-library-modal__fonts-grid__main">
+								{ items.map( ( font ) => (
+									<FontCard
+										key={ font.font_family_settings.slug }
+										font={ font.font_family_settings }
+										navigatorPath={ '/fontFamily' }
+										onClick={ () => {
+											setSelectedFont(
+												font.font_family_settings
+											);
+										} }
+									/>
+								) ) }
+							</div>
+						</NavigatorScreen>
+
+						<NavigatorScreen path="/fontFamily">
+							<Flex justify="flex-start">
+								<NavigatorToParentButton
+									icon={ chevronLeft }
+									size="small"
+									onClick={ () => {
+										setSelectedFont( null );
+										setNotice( null );
+									} }
+									label={ __( 'Back' ) }
+								/>
+								<Heading
+									level={ 2 }
+									size={ 13 }
+									className="edit-site-global-styles-header"
+								>
+									{ selectedFont?.name }
+								</Heading>
+							</Flex>
+							{ notice && (
+								<>
+									<Spacer margin={ 1 } />
+									<Notice
+										status={ notice.type }
+										onRemove={ () => setNotice( null ) }
+									>
+										{ notice.message }
+									</Notice>
+									<Spacer margin={ 1 } />
+								</>
+							) }
+							<Spacer margin={ 4 } />
+							<Text>
+								{ __( 'Select font variants to install.' ) }
 							</Text>
-						) }
-
-					<div className="font-library-modal__fonts-grid__main">
-						{ items.map( ( font ) => (
-							<FontCard
-								key={ font.font_family_settings.slug }
-								font={ font.font_family_settings }
-								navigatorPath={ '/fontFamily' }
-								onClick={ () => {
-									setSelectedFont(
-										font.font_family_settings
-									);
-								} }
-							/>
-						) ) }
-					</div>
-				</NavigatorScreen>
-
-				<NavigatorScreen path="/fontFamily">
-					<Flex justify="flex-start">
-						<NavigatorToParentButton
-							icon={ chevronLeft }
-							size="small"
-							onClick={ () => {
-								setSelectedFont( null );
-								setNotice( null );
-							} }
-							label={ __( 'Back' ) }
-						/>
-						<Heading
-							level={ 2 }
-							size={ 13 }
-							className="edit-site-global-styles-header"
+							<Spacer margin={ 4 } />
+							<VStack spacing={ 0 }>
+								<Spacer margin={ 8 } />
+								{ getSortedFontFaces( selectedFont ).map(
+									( face, i ) => (
+										<CollectionFontVariant
+											font={ selectedFont }
+											face={ face }
+											key={ `face${ i }` }
+											handleToggleVariant={
+												handleToggleVariant
+											}
+											selected={ isFontFontFaceInOutline(
+												selectedFont.slug,
+												selectedFont.fontFace
+													? face
+													: null, // If the font has no fontFace, we want to check if the font is in the outline
+												fontToInstallOutline
+											) }
+										/>
+									)
+								) }
+							</VStack>
+							<Spacer margin={ 16 } />
+						</NavigatorScreen>
+					</NavigatorProvider>
+
+					{ selectedFont && (
+						<Flex
+							justify="flex-end"
+							className="font-library-modal__tabpanel-layout__footer"
 						>
-							{ selectedFont?.name }
-						</Heading>
-					</Flex>
-					{ notice && (
-						<>
-							<Spacer margin={ 1 } />
-							<Notice
-								status={ notice.type }
-								onRemove={ () => setNotice( null ) }
+							<Button
+								variant="primary"
+								onClick={ handleInstall }
+								isBusy={ isInstalling }
+								disabled={
+									fontsToInstall.length === 0 || isInstalling
+								}
+								__experimentalIsFocusable
 							>
-								{ notice.message }
-							</Notice>
-							<Spacer margin={ 1 } />
-						</>
+								{ __( 'Install' ) }
+							</Button>
+						</Flex>
 					) }
-					<Spacer margin={ 4 } />
-					<Text> { __( 'Select font variants to install.' ) } </Text>
-					<Spacer margin={ 4 } />
-					<VStack spacing={ 0 }>
-						<Spacer margin={ 8 } />
-						{ getSortedFontFaces( selectedFont ).map(
-							( face, i ) => (
-								<CollectionFontVariant
-									font={ selectedFont }
-									face={ face }
-									key={ `face${ i }` }
-									handleToggleVariant={ handleToggleVariant }
-									selected={ isFontFontFaceInOutline(
-										selectedFont.slug,
-										selectedFont.fontFace ? face : null, // If the font has no fontFace, we want to check if the font is in the outline
-										fontToInstallOutline
-									) }
-								/>
-							)
-						) }
-					</VStack>
-					<Spacer margin={ 16 } />
-				</NavigatorScreen>
-			</NavigatorProvider>
-
-			{ selectedFont && (
-				<Flex
-					justify="flex-end"
-					className="font-library-modal__tabpanel-layout__footer"
-				>
-					<Button
-						variant="primary"
-						onClick={ handleInstall }
-						isBusy={ isInstalling }
-						disabled={ fontsToInstall.length === 0 || isInstalling }
-						__experimentalIsFocusable
-					>
-						{ __( 'Install' ) }
-					</Button>
-				</Flex>
-			) }
 
-			{ ! selectedFont && (
-				<Flex
-					justify="center"
-					className="font-library-modal__tabpanel-layout__footer"
-				>
-					<Button
-						label={ __( 'First page' ) }
-						size="compact"
-						onClick={ () => setPage( 1 ) }
-						disabled={ page === 1 }
-						__experimentalIsFocusable
-					>
-						<span>«</span>
-					</Button>
-					<Button
-						label={ __( 'Previous page' ) }
-						size="compact"
-						onClick={ () => setPage( page - 1 ) }
-						disabled={ page === 1 }
-						__experimentalIsFocusable
-					>
-						<span>‹</span>
-					</Button>
-					<HStack
-						justify="flex-start"
-						expanded={ false }
-						spacing={ 2 }
-					>
-						{ createInterpolateElement(
-							sprintf(
-								// translators: %s: Total number of pages.
-								_x(
-									'Page <CurrentPageControl /> of %s',
-									'paging'
-								),
-								totalPages
-							),
-							{
-								CurrentPageControl: (
-									<SelectControl
-										aria-label={ __( 'Current page' ) }
-										value={ page }
-										options={ [
-											...Array( totalPages ),
-										].map( ( e, i ) => {
-											return {
-												label: i + 1,
-												value: i + 1,
-											};
-										} ) }
-										onChange={ ( newPage ) =>
-											setPage( parseInt( newPage ) )
-										}
-										size={ 'compact' }
-										__nextHasNoMarginBottom
-									/>
-								),
-							}
-						) }
-					</HStack>
-					<Button
-						label={ __( 'Next page' ) }
-						size="compact"
-						onClick={ () => setPage( page + 1 ) }
-						disabled={ page === totalPages }
-						__experimentalIsFocusable
-					>
-						<span>›</span>
-					</Button>
-					<Button
-						label={ __( 'Last page' ) }
-						size="compact"
-						onClick={ () => setPage( totalPages ) }
-						disabled={ page === totalPages }
-						__experimentalIsFocusable
-					>
-						<span>»</span>
-					</Button>
-				</Flex>
+					{ ! selectedFont && (
+						<Flex
+							justify="center"
+							className="font-library-modal__tabpanel-layout__footer"
+						>
+							<Button
+								label={ __( 'First page' ) }
+								size="compact"
+								onClick={ () => setPage( 1 ) }
+								disabled={ page === 1 }
+								__experimentalIsFocusable
+							>
+								<span>«</span>
+							</Button>
+							<Button
+								label={ __( 'Previous page' ) }
+								size="compact"
+								onClick={ () => setPage( page - 1 ) }
+								disabled={ page === 1 }
+								__experimentalIsFocusable
+							>
+								<span>‹</span>
+							</Button>
+							<HStack
+								justify="flex-start"
+								expanded={ false }
+								spacing={ 2 }
+							>
+								{ createInterpolateElement(
+									sprintf(
+										// translators: %s: Total number of pages.
+										_x(
+											'Page <CurrentPageControl /> of %s',
+											'paging'
+										),
+										totalPages
+									),
+									{
+										CurrentPageControl: (
+											<SelectControl
+												aria-label={ __(
+													'Current page'
+												) }
+												value={ page }
+												options={ [
+													...Array( totalPages ),
+												].map( ( e, i ) => {
+													return {
+														label: i + 1,
+														value: i + 1,
+													};
+												} ) }
+												onChange={ ( newPage ) =>
+													setPage(
+														parseInt( newPage )
+													)
+												}
+												size={ 'compact' }
+												__nextHasNoMarginBottom
+											/>
+										),
+									}
+								) }
+							</HStack>
+							<Button
+								label={ __( 'Next page' ) }
+								size="compact"
+								onClick={ () => setPage( page + 1 ) }
+								disabled={ page === totalPages }
+								__experimentalIsFocusable
+							>
+								<span>›</span>
+							</Button>
+							<Button
+								label={ __( 'Last page' ) }
+								size="compact"
+								onClick={ () => setPage( totalPages ) }
+								disabled={ page === totalPages }
+								__experimentalIsFocusable
+							>
+								<span>»</span>
+							</Button>
+						</Flex>
+					) }
+				</>
 			) }
 		</div>
 	);
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
index 16011a20e82fb..b33bb1b639d00 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
@@ -15,7 +15,6 @@ import {
 	__experimentalVStack as VStack,
 	Flex,
 	Notice,
-	Spinner,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
@@ -114,163 +113,171 @@ function InstalledFonts() {
 	return (
 		<div className="font-library-modal__tabpanel-layout">
 			{ isResolvingLibrary && (
-				<HStack align="center">
-					<Spacer />
-					<Spinner />
-					<Spacer />
-				</HStack>
+				<div className="font-library-modal__loading">
+					<ProgressBar />
+				</div>
 			) }
 
-			<NavigatorProvider
-				initialPath={ libraryFontSelected ? '/fontFamily' : '/' }
-			>
-				<NavigatorScreen path="/">
-					{ notice && (
-						<>
-							<Spacer margin={ 1 } />
-							<Notice
-								status={ notice.type }
-								onRemove={ () => setNotice( null ) }
-							>
-								{ notice.message }
-							</Notice>
-							<Spacer margin={ 1 } />
-						</>
-					) }
-					{ baseCustomFonts.length > 0 && (
-						<>
-							<Text className="font-library-modal__subtitle">
-								{ __( 'Installed Fonts' ) }
-							</Text>
-							<Spacer margin={ 2 } />
-							{ baseCustomFonts.map( ( font ) => (
-								<FontCard
-									font={ font }
-									key={ font.slug }
-									navigatorPath={ '/fontFamily' }
-									variantsText={ getFontCardVariantsText(
-										font
-									) }
-									onClick={ () => {
-										handleSetLibraryFontSelected( font );
-									} }
-								/>
-							) ) }
-							<Spacer margin={ 8 } />
-						</>
-					) }
+			{ ! isResolvingLibrary && (
+				<>
+					<NavigatorProvider
+						initialPath={
+							libraryFontSelected ? '/fontFamily' : '/'
+						}
+					>
+						<NavigatorScreen path="/">
+							{ notice && (
+								<>
+									<Spacer margin={ 1 } />
+									<Notice
+										status={ notice.type }
+										onRemove={ () => setNotice( null ) }
+									>
+										{ notice.message }
+									</Notice>
+									<Spacer margin={ 1 } />
+								</>
+							) }
+							{ baseCustomFonts.length > 0 && (
+								<>
+									<Text className="font-library-modal__subtitle">
+										{ __( 'Installed Fonts' ) }
+									</Text>
+									<Spacer margin={ 2 } />
+									{ baseCustomFonts.map( ( font ) => (
+										<FontCard
+											font={ font }
+											key={ font.slug }
+											navigatorPath={ '/fontFamily' }
+											variantsText={ getFontCardVariantsText(
+												font
+											) }
+											onClick={ () => {
+												handleSetLibraryFontSelected(
+													font
+												);
+											} }
+										/>
+									) ) }
+									<Spacer margin={ 8 } />
+								</>
+							) }
 
-					{ baseThemeFonts.length > 0 && (
-						<>
-							<Text className="font-library-modal__subtitle">
-								{ __( 'Theme Fonts' ) }
-							</Text>
-							<Spacer margin={ 2 } />
-							{ baseThemeFonts.map( ( font ) => (
-								<FontCard
-									font={ font }
-									key={ font.slug }
-									navigatorPath={ '/fontFamily' }
-									variantsText={ getFontCardVariantsText(
-										font
-									) }
+							{ baseThemeFonts.length > 0 && (
+								<>
+									<Text className="font-library-modal__subtitle">
+										{ __( 'Theme Fonts' ) }
+									</Text>
+									<Spacer margin={ 2 } />
+									{ baseThemeFonts.map( ( font ) => (
+										<FontCard
+											font={ font }
+											key={ font.slug }
+											navigatorPath={ '/fontFamily' }
+											variantsText={ getFontCardVariantsText(
+												font
+											) }
+											onClick={ () => {
+												handleSetLibraryFontSelected(
+													font
+												);
+											} }
+										/>
+									) ) }
+								</>
+							) }
+						</NavigatorScreen>
+
+						<NavigatorScreen path="/fontFamily">
+							<ConfirmDeleteDialog
+								font={ libraryFontSelected }
+								isOpen={ isConfirmDeleteOpen }
+								setIsOpen={ setIsConfirmDeleteOpen }
+								setNotice={ setNotice }
+								uninstallFontFamily={ uninstallFontFamily }
+								handleSetLibraryFontSelected={
+									handleSetLibraryFontSelected
+								}
+							/>
+
+							<Flex justify="flex-start">
+								<NavigatorToParentButton
+									icon={ chevronLeft }
+									size="small"
 									onClick={ () => {
-										handleSetLibraryFontSelected( font );
+										handleSetLibraryFontSelected( null );
 									} }
+									label={ __( 'Back' ) }
 								/>
-							) ) }
-						</>
-					) }
-				</NavigatorScreen>
-
-				<NavigatorScreen path="/fontFamily">
-					<ConfirmDeleteDialog
-						font={ libraryFontSelected }
-						isOpen={ isConfirmDeleteOpen }
-						setIsOpen={ setIsConfirmDeleteOpen }
-						setNotice={ setNotice }
-						uninstallFontFamily={ uninstallFontFamily }
-						handleSetLibraryFontSelected={
-							handleSetLibraryFontSelected
-						}
-					/>
+								<Heading
+									level={ 2 }
+									size={ 13 }
+									className="edit-site-global-styles-header"
+								>
+									{ libraryFontSelected?.name }
+								</Heading>
+							</Flex>
+							{ notice && (
+								<>
+									<Spacer margin={ 1 } />
+									<Notice
+										status={ notice.type }
+										onRemove={ () => setNotice( null ) }
+									>
+										{ notice.message }
+									</Notice>
+									<Spacer margin={ 1 } />
+								</>
+							) }
+							<Spacer margin={ 4 } />
+							<Text>
+								{ __(
+									'Choose font variants. Keep in mind that too many variants could make your site slower.'
+								) }
+							</Text>
+							<Spacer margin={ 4 } />
+							<VStack spacing={ 0 }>
+								<Spacer margin={ 8 } />
+								{ getFontFacesToDisplay(
+									libraryFontSelected
+								).map( ( face, i ) => (
+									<LibraryFontVariant
+										font={ libraryFontSelected }
+										face={ face }
+										key={ `face${ i }` }
+									/>
+								) ) }
+							</VStack>
+						</NavigatorScreen>
+					</NavigatorProvider>
 
-					<Flex justify="flex-start">
-						<NavigatorToParentButton
-							icon={ chevronLeft }
-							size="small"
+					<HStack
+						justify="flex-end"
+						className="font-library-modal__tabpanel-layout__footer"
+					>
+						{ isInstalling && <ProgressBar /> }
+						{ shouldDisplayDeleteButton && (
+							<Button
+								isDestructive
+								variant="tertiary"
+								onClick={ handleUninstallClick }
+							>
+								{ __( 'Delete' ) }
+							</Button>
+						) }
+						<Button
+							variant="primary"
 							onClick={ () => {
-								handleSetLibraryFontSelected( null );
+								saveFontFamilies( fontFamilies );
 							} }
-							label={ __( 'Back' ) }
-						/>
-						<Heading
-							level={ 2 }
-							size={ 13 }
-							className="edit-site-global-styles-header"
+							disabled={ ! fontFamiliesHasChanges }
+							__experimentalIsFocusable
 						>
-							{ libraryFontSelected?.name }
-						</Heading>
-					</Flex>
-					{ notice && (
-						<>
-							<Spacer margin={ 1 } />
-							<Notice
-								status={ notice.type }
-								onRemove={ () => setNotice( null ) }
-							>
-								{ notice.message }
-							</Notice>
-							<Spacer margin={ 1 } />
-						</>
-					) }
-					<Spacer margin={ 4 } />
-					<Text>
-						{ __(
-							'Choose font variants. Keep in mind that too many variants could make your site slower.'
-						) }
-					</Text>
-					<Spacer margin={ 4 } />
-					<VStack spacing={ 0 }>
-						<Spacer margin={ 8 } />
-						{ getFontFacesToDisplay( libraryFontSelected ).map(
-							( face, i ) => (
-								<LibraryFontVariant
-									font={ libraryFontSelected }
-									face={ face }
-									key={ `face${ i }` }
-								/>
-							)
-						) }
-					</VStack>
-				</NavigatorScreen>
-			</NavigatorProvider>
-
-			<HStack
-				justify="flex-end"
-				className="font-library-modal__tabpanel-layout__footer"
-			>
-				{ isInstalling && <ProgressBar /> }
-				{ shouldDisplayDeleteButton && (
-					<Button
-						isDestructive
-						variant="tertiary"
-						onClick={ handleUninstallClick }
-					>
-						{ __( 'Delete' ) }
-					</Button>
-				) }
-				<Button
-					variant="primary"
-					onClick={ () => {
-						saveFontFamilies( fontFamilies );
-					} }
-					disabled={ ! fontFamiliesHasChanges }
-					__experimentalIsFocusable
-				>
-					{ __( 'Update' ) }
-				</Button>
-			</HStack>
+							{ __( 'Update' ) }
+						</Button>
+					</HStack>
+				</>
+			) }
 		</div>
 	);
 }
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 ccf4eb7ea623f..201d4d87a3fb1 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
@@ -7,7 +7,6 @@ $footer-height: 70px;
 	// the content width, we should use that prop instead of this style.
 	// see https://github.com/WordPress/gutenberg/issues/54471.
 	&.font-library-modal {
-
 		@include break-medium() {
 			width: 65vw;
 		}
@@ -35,9 +34,22 @@ $footer-height: 70px;
 }
 
 .font-library-modal__tabpanel-layout {
-
 	margin-top: $grid-unit-40;
 
+	.font-library-modal__loading {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		position: absolute;
+		left: 0;
+		top: 0;
+		align-items: center;
+		justify-content: center;
+		// Push down so that the progress bar is centered vertically.
+		// It should be 120px (72px modal header height + 48px tab height)
+		padding-top: $header-height + $grid-unit-15 + $grid-unit-60;
+	}
+
 	.font-library-modal__tabpanel-layout__footer {
 		border-top: 1px solid $gray-300;
 		margin: 0 #{$grid-unit-40 * -1} #{$grid-unit-40 * -1};
@@ -72,19 +84,19 @@ $footer-height: 70px;
 	.font-library-modal__font-card__count {
 		color: $gray-700;
 	}
-}
 
-.font-library-modal__font-variant_demo-image {
-	display: block;
-	height: $grid-unit-30;
-	width: auto;
-}
+	.font-library-modal__font-variant_demo-image {
+		display: block;
+		height: $grid-unit-30;
+		width: auto;
+	}
 
-.font-library-modal__font-variant_demo-text {
-	white-space: nowrap;
-	flex-shrink: 0;
-	transition: opacity 0.3s ease-in-out;
-	@include reduce-motion("transition");
+	.font-library-modal__font-variant_demo-text {
+		white-space: nowrap;
+		flex-shrink: 0;
+		transition: opacity 0.3s ease-in-out;
+		@include reduce-motion("transition");
+	}
 }
 
 .font-library-modal__font-variant {