diff --git a/lib/experimental/fonts/load.php b/lib/experimental/fonts/load.php
new file mode 100644
index 00000000000000..fdd5dc71ebec24
--- /dev/null
+++ b/lib/experimental/fonts/load.php
@@ -0,0 +1,28 @@
+<?php
+/**
+ * Bootstraps the Fonts library page in wp-admin.
+ *
+ * @package gutenberg
+ */
+
+add_action( 'admin_menu', 'gutenberg_register_fonts_menu_item' );
+
+/**
+ * Registers the Fonts menu item under Appearance using the gutenberg-boot-wp-admin routing infrastructure.
+ */
+function gutenberg_register_fonts_menu_item() {
+	if ( ! wp_is_block_theme() ) {
+		return;
+	}
+
+	$url = admin_url( 'admin.php?page=gutenberg-boot-wp-admin&p=' . urlencode( '/font-list' ) );
+
+	add_submenu_page(
+		'themes.php',
+		__( 'Fonts', 'gutenberg' ),
+		__( 'Fonts', 'gutenberg' ),
+		'edit_theme_options',
+		$url,
+		''
+	);
+}
diff --git a/lib/experimental/pages/gutenberg-boot.php b/lib/experimental/pages/gutenberg-boot.php
index dfe53f55b6bc17..c911bb355f487a 100644
--- a/lib/experimental/pages/gutenberg-boot.php
+++ b/lib/experimental/pages/gutenberg-boot.php
@@ -33,5 +33,6 @@ function gutenberg_boot_register_default_menu_items() {
 	}
 	register_gutenberg_boot_menu_item( 'templateParts', __( 'Template Parts', 'gutenberg' ), '/template-parts', '' );
 	register_gutenberg_boot_menu_item( 'patterns', __( 'Patterns', 'gutenberg' ), '/patterns', '' );
+	register_gutenberg_boot_menu_item( 'fontList', __( 'Fonts', 'gutenberg' ), '/font-list', '' );
 }
 add_action( 'gutenberg-boot_init', 'gutenberg_boot_register_default_menu_items', 5 );
diff --git a/lib/load.php b/lib/load.php
index 543a10841f419f..98964345b1cfad 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -117,6 +117,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/experimental/script-modules.php';
 require __DIR__ . '/experimental/pages/gutenberg-boot.php';
 require __DIR__ . '/experimental/posts/load.php';
+require __DIR__ . '/experimental/fonts/load.php';
 
 if ( gutenberg_is_experiment_enabled( 'gutenberg-workflow-palette' ) ) {
 	require __DIR__ . '/experimental/workflow-palette.php';
diff --git a/package-lock.json b/package-lock.json
index 7215dce8fdb904..fed332da3dee8d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18148,6 +18148,10 @@
 			"resolved": "packages/fields",
 			"link": true
 		},
+		"node_modules/@wordpress/font-list-route": {
+			"resolved": "routes/font-list",
+			"link": true
+		},
 		"node_modules/@wordpress/format-library": {
 			"resolved": "packages/format-library",
 			"link": true
@@ -56254,6 +56258,24 @@
 				}
 			}
 		},
+		"routes/font-list": {
+			"name": "@wordpress/font-list-route",
+			"version": "1.0.0",
+			"dependencies": {
+				"@wordpress/admin-ui": "file:../../packages/admin-ui",
+				"@wordpress/components": "file:../../packages/components",
+				"@wordpress/compose": "file:../../packages/compose",
+				"@wordpress/core-data": "file:../../packages/core-data",
+				"@wordpress/data": "file:../../packages/data",
+				"@wordpress/editor": "file:../../packages/editor",
+				"@wordpress/element": "file:../../packages/element",
+				"@wordpress/global-styles-engine": "file:../../packages/global-styles-engine",
+				"@wordpress/global-styles-ui": "file:../../packages/global-styles-ui",
+				"@wordpress/i18n": "file:../../packages/i18n",
+				"@wordpress/private-apis": "file:../../packages/private-apis",
+				"@wordpress/route": "file:../../packages/route"
+			}
+		},
 		"routes/home": {},
 		"routes/navigation": {
 			"dependencies": {
diff --git a/packages/admin-ui/src/page/style.scss b/packages/admin-ui/src/page/style.scss
index 91234ec5878692..3def30af03c8ad 100644
--- a/packages/admin-ui/src/page/style.scss
+++ b/packages/admin-ui/src/page/style.scss
@@ -19,6 +19,7 @@
 	background: $white;
 	position: sticky;
 	top: 0;
+	z-index: 1;
 }
 
 .admin-ui-page__sidebar-toggle-slot:empty {
diff --git a/packages/boot/src/components/root/style.scss b/packages/boot/src/components/root/style.scss
index 0aa1da3da828a4..2ea55ea62de685 100644
--- a/packages/boot/src/components/root/style.scss
+++ b/packages/boot/src/components/root/style.scss
@@ -69,6 +69,10 @@
 
 	@include mixins.break-medium {
 		margin: variables.$grid-unit-10;
+
+		.boot-layout--single-page & {
+			margin-top: 0;
+		}
 	}
 }
 
diff --git a/packages/boot/src/style.scss b/packages/boot/src/style.scss
index 6428c348adbb8f..c5b95aa946fb3e 100644
--- a/packages/boot/src/style.scss
+++ b/packages/boot/src/style.scss
@@ -11,6 +11,7 @@
 body:has(.boot-layout-container) {
 	background: #1d2327; // Same as WP-Admin sidebar
 	overflow: hidden;
+	@include wp-admin-reset( ".boot-layout-container" );
 }
 
 #wpcontent {
diff --git a/packages/edit-site-init/src/index.ts b/packages/edit-site-init/src/index.ts
index 3c3915d6c409bd..2825f5fafdd0f3 100644
--- a/packages/edit-site-init/src/index.ts
+++ b/packages/edit-site-init/src/index.ts
@@ -9,6 +9,7 @@ import {
 	symbol,
 	symbolFilled,
 	layout,
+	typography,
 } from '@wordpress/icons';
 import { dispatch } from '@wordpress/data';
 import { store as bootStore } from '@wordpress/boot';
@@ -27,6 +28,7 @@ export async function init() {
 		templateParts: { icon: symbolFilled },
 		patterns: { icon: symbol },
 		templates: { icon: layout },
+		fontList: { icon: typography },
 	};
 
 	// Update each menu item with its icon
diff --git a/packages/global-styles-ui/src/font-families.tsx b/packages/global-styles-ui/src/font-families.tsx
index 3d7a7b031329b8..b4d9cd31f2a6c1 100644
--- a/packages/global-styles-ui/src/font-families.tsx
+++ b/packages/global-styles-ui/src/font-families.tsx
@@ -19,10 +19,10 @@ import { Subtitle } from './subtitle';
 import { useSetting } from './hooks';
 import FontLibraryProvider, {
 	FontLibraryContext,
-} from './font-library-modal/context';
-import FontLibraryModal from './font-library-modal';
+} from './font-library/context';
+import FontLibraryModal from './font-library/modal';
 import FontFamilyItem from './font-family-item';
-import { setUIValuesNeeded } from './font-library-modal/utils';
+import { setUIValuesNeeded } from './font-library/utils';
 
 /**
  * Maps the fonts with the source, if available.
diff --git a/packages/global-styles-ui/src/font-family-item.tsx b/packages/global-styles-ui/src/font-family-item.tsx
index 2833640b25edd6..33e73e4e5e3625 100644
--- a/packages/global-styles-ui/src/font-family-item.tsx
+++ b/packages/global-styles-ui/src/font-family-item.tsx
@@ -13,8 +13,8 @@ import type { FontFamily } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import { FontLibraryContext } from './font-library-modal/context';
-import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
+import { FontLibraryContext } from './font-library/context';
+import { getFamilyPreviewStyle } from './font-library/utils/preview-styles';
 
 interface FontFamilyItemProps {
 	font: FontFamily;
diff --git a/packages/global-styles-ui/src/font-library-modal/api.ts b/packages/global-styles-ui/src/font-library/api.ts
similarity index 100%
rename from packages/global-styles-ui/src/font-library-modal/api.ts
rename to packages/global-styles-ui/src/font-library/api.ts
diff --git a/packages/global-styles-ui/src/font-library-modal/collection-font-variant.tsx b/packages/global-styles-ui/src/font-library/collection-font-variant.tsx
similarity index 95%
rename from packages/global-styles-ui/src/font-library-modal/collection-font-variant.tsx
rename to packages/global-styles-ui/src/font-library/collection-font-variant.tsx
index 27d0f1304646e6..679da08f8019e8 100644
--- a/packages/global-styles-ui/src/font-library-modal/collection-font-variant.tsx
+++ b/packages/global-styles-ui/src/font-library/collection-font-variant.tsx
@@ -29,7 +29,7 @@ function CollectionFontVariant( {
 	const checkboxId = useId();
 
 	return (
-		<div className="font-library-modal__font-card">
+		<div className="font-library__font-card">
 			<Flex justify="flex-start" align="center" gap="1rem">
 				<CheckboxControl
 					checked={ selected }
diff --git a/packages/global-styles-ui/src/font-library-modal/context.tsx b/packages/global-styles-ui/src/font-library/context.tsx
similarity index 100%
rename from packages/global-styles-ui/src/font-library-modal/context.tsx
rename to packages/global-styles-ui/src/font-library/context.tsx
diff --git a/packages/global-styles-ui/src/font-library-modal/font-card.tsx b/packages/global-styles-ui/src/font-library/font-card.tsx
similarity index 93%
rename from packages/global-styles-ui/src/font-library-modal/font-card.tsx
rename to packages/global-styles-ui/src/font-library/font-card.tsx
index e146cb71ce9e29..e5a2788667fbee 100644
--- a/packages/global-styles-ui/src/font-library-modal/font-card.tsx
+++ b/packages/global-styles-ui/src/font-library/font-card.tsx
@@ -46,13 +46,13 @@ function FontCard( {
 				}
 			} }
 			style={ style }
-			className="font-library-modal__font-card"
+			className="font-library__font-card"
 		>
 			<Flex justify="space-between" wrap={ false }>
 				<FontDemo font={ font } />
 				<Flex justify="flex-end">
 					<FlexItem>
-						<Text className="font-library-modal__font-card__count">
+						<Text className="font-library__font-card__count">
 							{ variantsText ||
 								sprintf(
 									/* translators: %d: Number of font variants. */
diff --git a/packages/global-styles-ui/src/font-library-modal/font-collection.tsx b/packages/global-styles-ui/src/font-library/font-collection.tsx
similarity index 95%
rename from packages/global-styles-ui/src/font-library-modal/font-collection.tsx
rename to packages/global-styles-ui/src/font-library/font-collection.tsx
index 81aa2f95f6a055..c5891976b7dedd 100644
--- a/packages/global-styles-ui/src/font-library-modal/font-collection.tsx
+++ b/packages/global-styles-ui/src/font-library/font-collection.tsx
@@ -279,9 +279,9 @@ function FontCollection( { slug }: { slug: string } ) {
 	};
 
 	return (
-		<div className="font-library-modal__tabpanel-layout">
+		<div className="font-library__tabpanel-layout">
 			{ isLoading && (
-				<div className="font-library-modal__loading">
+				<div className="font-library__loading">
 					<ProgressBar />
 				</div>
 			) }
@@ -290,7 +290,7 @@ function FontCollection( { slug }: { slug: string } ) {
 				<>
 					<Navigator
 						initialPath="/"
-						className="font-library-modal__tabpanel-layout"
+						className="font-library__tabpanel-layout"
 					>
 						<Navigator.Screen path="/">
 							<HStack justify="space-between">
@@ -344,7 +344,7 @@ function FontCollection( { slug }: { slug: string } ) {
 									</Text>
 								) }
 
-							<div className="font-library-modal__fonts-grid__main">
+							<div className="font-library__fonts-grid__main">
 								{ /*
 								 * Disable reason: The `list` ARIA role is redundant but
 								 * Safari+VoiceOver won't announce the list otherwise.
@@ -352,14 +352,14 @@ function FontCollection( { slug }: { slug: string } ) {
 								/* eslint-disable jsx-a11y/no-redundant-roles */ }
 								<ul
 									role="list"
-									className="font-library-modal__fonts-list"
+									className="font-library__fonts-list"
 								>
 									{ items.map( ( font ) => (
 										<li
 											key={
 												font.font_family_settings.slug
 											}
-											className="font-library-modal__fonts-list-item"
+											className="font-library__fonts-list-item"
 										>
 											<FontCard
 												font={
@@ -418,7 +418,7 @@ function FontCollection( { slug }: { slug: string } ) {
 							</Text>
 							<Spacer margin={ 4 } />
 							<CheckboxControl
-								className="font-library-modal__select-all"
+								className="font-library__select-all"
 								label={ __( 'Select all' ) }
 								checked={ isSelectAllChecked }
 								onChange={ toggleSelectAll }
@@ -433,14 +433,14 @@ function FontCollection( { slug }: { slug: string } ) {
 								/* eslint-disable jsx-a11y/no-redundant-roles */ }
 								<ul
 									role="list"
-									className="font-library-modal__fonts-list"
+									className="font-library__fonts-list"
 								>
 									{ selectedFont &&
 										getSortedFontFaces( selectedFont ).map(
 											( face, i ) => (
 												<li
 													key={ `face${ i }` }
-													className="font-library-modal__fonts-list-item"
+													className="font-library__fonts-list-item"
 												>
 													<CollectionFontVariant
 														font={ selectedFont }
@@ -469,7 +469,7 @@ function FontCollection( { slug }: { slug: string } ) {
 					{ selectedFont && (
 						<Flex
 							justify="flex-end"
-							className="font-library-modal__footer"
+							className="font-library__footer"
 						>
 							<Button
 								__next40pxDefaultSize
@@ -489,7 +489,7 @@ function FontCollection( { slug }: { slug: string } ) {
 					{ ! selectedFont && (
 						<HStack
 							expanded={ false }
-							className="font-library-modal__footer"
+							className="font-library__footer"
 							justify="end"
 							spacing={ 6 }
 						>
@@ -497,7 +497,7 @@ function FontCollection( { slug }: { slug: string } ) {
 								justify="flex-start"
 								expanded={ false }
 								spacing={ 1 }
-								className="font-library-modal__page-selection"
+								className="font-library__page-selection"
 							>
 								{ createInterpolateElement(
 									sprintf(
diff --git a/packages/global-styles-ui/src/font-library-modal/font-demo.tsx b/packages/global-styles-ui/src/font-library/font-demo.tsx
similarity index 96%
rename from packages/global-styles-ui/src/font-library-modal/font-demo.tsx
rename to packages/global-styles-ui/src/font-library/font-demo.tsx
index a943cf225daca4..e5761ead9ddb30 100644
--- a/packages/global-styles-ui/src/font-library-modal/font-demo.tsx
+++ b/packages/global-styles-ui/src/font-library/font-demo.tsx
@@ -106,12 +106,12 @@ function FontDemo( { font, text }: FontDemoProps ) {
 					src={ previewUrl }
 					loading="lazy"
 					alt={ text }
-					className="font-library-modal__font-variant_demo-image"
+					className="font-library__font-variant_demo-image"
 				/>
 			) : (
 				<Text
 					style={ textDemoStyle }
-					className="font-library-modal__font-variant_demo-text"
+					className="font-library__font-variant_demo-text"
 				>
 					{ text }
 				</Text>
diff --git a/packages/global-styles-ui/src/font-library/font-library.tsx b/packages/global-styles-ui/src/font-library/font-library.tsx
new file mode 100644
index 00000000000000..ff378b26aa8725
--- /dev/null
+++ b/packages/global-styles-ui/src/font-library/font-library.tsx
@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+import { GlobalStylesProvider } from '../provider';
+import FontLibraryProvider from './context';
+import InstalledFonts from './installed-fonts';
+import UploadFonts from './upload-fonts';
+import FontCollection from './font-collection';
+
+interface FontLibraryProps {
+	value: any;
+	baseValue: any;
+	onChange: ( value: any ) => void;
+	activeTab?: string;
+	onTabChange?: ( tab: string ) => void;
+}
+
+export function FontLibrary( {
+	value,
+	baseValue,
+	onChange,
+	activeTab = 'installed-fonts',
+}: FontLibraryProps ) {
+	let content;
+	switch ( activeTab ) {
+		case 'upload-fonts':
+			content = <UploadFonts />;
+			break;
+		case 'installed-fonts':
+			content = <InstalledFonts />;
+			break;
+		default:
+			content = <FontCollection slug={ activeTab } />;
+	}
+
+	return (
+		<GlobalStylesProvider
+			value={ value }
+			baseValue={ baseValue }
+			onChange={ onChange }
+		>
+			<FontLibraryProvider>{ content }</FontLibraryProvider>
+		</GlobalStylesProvider>
+	);
+}
diff --git a/packages/global-styles-ui/src/font-library-modal/google-fonts-confirm-dialog.tsx b/packages/global-styles-ui/src/font-library/google-fonts-confirm-dialog.tsx
similarity index 100%
rename from packages/global-styles-ui/src/font-library-modal/google-fonts-confirm-dialog.tsx
rename to packages/global-styles-ui/src/font-library/google-fonts-confirm-dialog.tsx
diff --git a/packages/global-styles-ui/src/font-library-modal/installed-fonts.tsx b/packages/global-styles-ui/src/font-library/installed-fonts.tsx
similarity index 95%
rename from packages/global-styles-ui/src/font-library-modal/installed-fonts.tsx
rename to packages/global-styles-ui/src/font-library/installed-fonts.tsx
index 76987f18230ca2..72a760ef46d37c 100644
--- a/packages/global-styles-ui/src/font-library-modal/installed-fonts.tsx
+++ b/packages/global-styles-ui/src/font-library/installed-fonts.tsx
@@ -232,9 +232,9 @@ function InstalledFonts() {
 
 	const hasFonts = baseThemeFonts.length > 0 || baseCustomFonts.length > 0;
 	return (
-		<div className="font-library-modal__tabpanel-layout">
+		<div className="font-library__tabpanel-layout">
 			{ isResolvingLibrary && (
-				<div className="font-library-modal__loading">
+				<div className="font-library__loading">
 					<ProgressBar />
 				</div>
 			) }
@@ -263,7 +263,7 @@ function InstalledFonts() {
 								) }
 								{ baseThemeFonts.length > 0 && (
 									<VStack>
-										<h2 className="font-library-modal__fonts-title">
+										<h2 className="font-library__fonts-title">
 											{
 												/* translators: Heading for a list of fonts provided by the theme. */
 												_x( 'Theme', 'font source' )
@@ -276,12 +276,12 @@ function InstalledFonts() {
 										/* eslint-disable jsx-a11y/no-redundant-roles */ }
 										<ul
 											role="list"
-											className="font-library-modal__fonts-list"
+											className="font-library__fonts-list"
 										>
 											{ baseThemeFonts.map( ( font ) => (
 												<li
 													key={ font.slug }
-													className="font-library-modal__fonts-list-item"
+													className="font-library__fonts-list-item"
 												>
 													<FontCard
 														font={ font }
@@ -304,7 +304,7 @@ function InstalledFonts() {
 								) }
 								{ baseCustomFonts.length > 0 && (
 									<VStack>
-										<h2 className="font-library-modal__fonts-title">
+										<h2 className="font-library__fonts-title">
 											{
 												/* translators: Heading for a list of fonts installed by the user. */
 												_x( 'Custom', 'font source' )
@@ -317,12 +317,12 @@ function InstalledFonts() {
 										/* eslint-disable jsx-a11y/no-redundant-roles */ }
 										<ul
 											role="list"
-											className="font-library-modal__fonts-list"
+											className="font-library__fonts-list"
 										>
 											{ baseCustomFonts.map( ( font ) => (
 												<li
 													key={ font.slug }
-													className="font-library-modal__fonts-list-item"
+													className="font-library__fonts-list-item"
 												>
 													<FontCard
 														font={ font }
@@ -403,7 +403,7 @@ function InstalledFonts() {
 							<Spacer margin={ 4 } />
 							<VStack spacing={ 0 }>
 								<CheckboxControl
-									className="font-library-modal__select-all"
+									className="font-library__select-all"
 									label={ __( 'Select all' ) }
 									checked={ isSelectAllChecked }
 									onChange={ toggleSelectAll }
@@ -418,7 +418,7 @@ function InstalledFonts() {
 								/* eslint-disable jsx-a11y/no-redundant-roles */ }
 								<ul
 									role="list"
-									className="font-library-modal__fonts-list"
+									className="font-library__fonts-list"
 								>
 									{ libraryFontSelected &&
 										getFontFacesToDisplay(
@@ -426,7 +426,7 @@ function InstalledFonts() {
 										).map( ( face, i ) => (
 											<li
 												key={ `face${ i }` }
-												className="font-library-modal__fonts-list-item"
+												className="font-library__fonts-list-item"
 											>
 												<LibraryFontVariant
 													font={ libraryFontSelected }
@@ -441,10 +441,7 @@ function InstalledFonts() {
 						</Navigator.Screen>
 					</Navigator>
 
-					<HStack
-						justify="flex-end"
-						className="font-library-modal__footer"
-					>
+					<HStack justify="flex-end" className="font-library__footer">
 						{ isInstalling && <ProgressBar /> }
 						{ shouldDisplayDeleteButton && (
 							<Button
diff --git a/packages/global-styles-ui/src/font-library-modal/lib/inflate.js b/packages/global-styles-ui/src/font-library/lib/inflate.js
similarity index 100%
rename from packages/global-styles-ui/src/font-library-modal/lib/inflate.js
rename to packages/global-styles-ui/src/font-library/lib/inflate.js
diff --git a/packages/global-styles-ui/src/font-library-modal/lib/lib-font.browser.d.ts b/packages/global-styles-ui/src/font-library/lib/lib-font.browser.d.ts
similarity index 100%
rename from packages/global-styles-ui/src/font-library-modal/lib/lib-font.browser.d.ts
rename to packages/global-styles-ui/src/font-library/lib/lib-font.browser.d.ts
diff --git a/packages/global-styles-ui/src/font-library-modal/lib/lib-font.browser.js b/packages/global-styles-ui/src/font-library/lib/lib-font.browser.js
similarity index 100%
rename from packages/global-styles-ui/src/font-library-modal/lib/lib-font.browser.js
rename to packages/global-styles-ui/src/font-library/lib/lib-font.browser.js
diff --git a/packages/global-styles-ui/src/font-library-modal/lib/unbrotli.js b/packages/global-styles-ui/src/font-library/lib/unbrotli.js
similarity index 100%
rename from packages/global-styles-ui/src/font-library-modal/lib/unbrotli.js
rename to packages/global-styles-ui/src/font-library/lib/unbrotli.js
diff --git a/packages/global-styles-ui/src/font-library-modal/library-font-details.tsx b/packages/global-styles-ui/src/font-library/library-font-details.tsx
similarity index 100%
rename from packages/global-styles-ui/src/font-library-modal/library-font-details.tsx
rename to packages/global-styles-ui/src/font-library/library-font-details.tsx
diff --git a/packages/global-styles-ui/src/font-library-modal/library-font-variant.tsx b/packages/global-styles-ui/src/font-library/library-font-variant.tsx
similarity index 96%
rename from packages/global-styles-ui/src/font-library-modal/library-font-variant.tsx
rename to packages/global-styles-ui/src/font-library/library-font-variant.tsx
index 4d6143b8952647..db585fc3e63eb7 100644
--- a/packages/global-styles-ui/src/font-library-modal/library-font-variant.tsx
+++ b/packages/global-styles-ui/src/font-library/library-font-variant.tsx
@@ -44,7 +44,7 @@ function LibraryFontVariant( {
 	const checkboxId = useId();
 
 	return (
-		<div className="font-library-modal__font-card">
+		<div className="font-library__font-card">
 			<Flex justify="flex-start" align="center" gap="1rem">
 				<CheckboxControl
 					checked={ isInstalled }
diff --git a/packages/global-styles-ui/src/font-library-modal/index.tsx b/packages/global-styles-ui/src/font-library/modal.tsx
similarity index 98%
rename from packages/global-styles-ui/src/font-library-modal/index.tsx
rename to packages/global-styles-ui/src/font-library/modal.tsx
index 3f040f5237b6e9..ac78e07bfdf8cc 100644
--- a/packages/global-styles-ui/src/font-library-modal/index.tsx
+++ b/packages/global-styles-ui/src/font-library/modal.tsx
@@ -98,6 +98,7 @@ function FontLibraryModal( {
 							key={ id }
 							tabId={ id }
 							focusable={ false }
+							className="font-library-modal__tab-panel"
 						>
 							{ contents }
 						</Tabs.TabPanel>
diff --git a/packages/global-styles-ui/src/font-library-modal/style.scss b/packages/global-styles-ui/src/font-library/style.scss
similarity index 71%
rename from packages/global-styles-ui/src/font-library-modal/style.scss
rename to packages/global-styles-ui/src/font-library/style.scss
index d786d686b96116..8c428e152735c1 100644
--- a/packages/global-styles-ui/src/font-library-modal/style.scss
+++ b/packages/global-styles-ui/src/font-library/style.scss
@@ -2,9 +2,7 @@
 @use "@wordpress/base-styles/variables";
 @use "@wordpress/base-styles/colors";
 
-// Fixed height for the modal footer.
-// Ensures that the footer is always visible when the modal content is scrollable.
-$footer-height: 60px;
+$footer-height: 90px;
 
 .font-library-modal {
 	// @todo If a new prop is added to the Modal component that constrains
@@ -21,26 +19,31 @@ $footer-height: 60px;
 	}
 
 	.components-modal__content {
-		padding-top: 0;
-		margin-bottom: $footer-height !important;
+		padding: 0;
+		margin-bottom: $footer-height;
 	}
 
-	.font-library-modal__subtitle {
+	.font-library__subtitle {
 		text-transform: uppercase;
 		font-weight: variables.$font-weight-medium;
 		font-size: 11px;
 	}
+}
 
-	// Add padding so the focus state outline (box-shadow) of font list items is visible
-	.components-navigator-screen {
-		padding: 3px;
-	}
+.font-library-modal__tab-panel {
+	height: calc(100% - 50px); // Subtracting header and tab heights
 }
 
-.font-library-modal__tabpanel-layout {
-	margin-top: variables.$grid-unit-30;
+.font-library__tabpanel-layout {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+
+	> div {
+		flex-grow: 1;
+	}
 
-	.font-library-modal__loading {
+	.font-library__loading {
 		width: 100%;
 		height: 100%;
 		display: flex;
@@ -54,34 +57,42 @@ $footer-height: 60px;
 		padding-top:
 			variables.$header-height + variables.$grid-unit-15 +
 			variables.$grid-unit-60;
+		box-sizing: border-box;
+	}
+
+	.components-navigator-screen {
+		padding: variables.$grid-unit-30;
+		width: 100%;
 	}
 }
 
-.font-library-modal__footer {
-	border-top: 1px solid colors.$gray-300;
-	margin: 0 #{variables.$grid-unit-30 * -1} #{variables.$grid-unit-30 * -1};
-	padding: variables.$grid-unit-20 variables.$grid-unit-30;
+.font-library__footer {
 	position: absolute;
-	bottom: variables.$grid-unit-30;
 	width: 100%;
-	height: $footer-height;
+	bottom: 0;
+	border-top: 1px solid colors.$gray-300;
+	padding: variables.$grid-unit-30;
 	background-color: colors.$white;
+	box-sizing: border-box;
+	flex-grow: 0 !important;
+	flex-shrink: 0;
+	height: $footer-height;
 }
 
-.font-library-modal__page-selection {
+.font-library__page-selection {
 	font-size: 11px;
 	font-weight: variables.$font-weight-medium;
 	text-transform: uppercase;
 
 	@include mixins.break-small() {
-		.font-library-modal__page-selection-trigger {
+		.font-library__page-selection-trigger {
 			font-size: 11px !important;
 			font-weight: variables.$font-weight-medium;
 		}
 	}
 }
 
-.font-library-modal__fonts-title {
+.font-library__fonts-title {
 	text-transform: uppercase;
 	font-size: 11px;
 	font-weight: 600;
@@ -89,18 +100,19 @@ $footer-height: 60px;
 	margin-bottom: 0;
 }
 
-.font-library-modal__fonts-list {
+.font-library__fonts-list {
 	list-style: none;
 	padding: 0;
 	margin-top: 0;
 	margin-bottom: 0;
 }
 
-.font-library-modal__fonts-list-item {
+.font-library__fonts-list-item {
 	margin-bottom: 0;
 }
 
-.font-library-modal__font-card {
+.font-library__font-card {
+	box-sizing: border-box;
 	border: variables.$border-width solid colors.$gray-300;
 	width: 100%;
 
@@ -119,21 +131,21 @@ $footer-height: 60px;
 		position: relative;
 	}
 
-	.font-library-modal__font-card__name {
+	.font-library__font-card__name {
 		font-weight: bold;
 	}
 
-	.font-library-modal__font-card__count {
+	.font-library__font-card__count {
 		color: colors.$gray-700;
 	}
 
-	.font-library-modal__font-variant_demo-image {
+	.font-library__font-variant_demo-image {
 		display: block;
 		height: variables.$grid-unit-30;
 		width: auto;
 	}
 
-	.font-library-modal__font-variant_demo-text {
+	.font-library__font-variant_demo-text {
 		white-space: nowrap;
 		flex-shrink: 0;
 
@@ -148,16 +160,10 @@ $footer-height: 60px;
 	top: 0;
 	border-bottom: 1px solid colors.$gray-300;
 	background: colors.$white;
-	margin: 0 #{variables.$grid-unit-30 * -1};
-	padding: 0 variables.$grid-unit-20;
 	z-index: 1;
-
-	[role="tablist"] {
-		margin-bottom: -1px;
-	}
 }
 
-.font-library-modal__upload-area {
+.font-library__upload-area {
 	align-items: center;
 	display: flex;
 	justify-content: center;
@@ -169,15 +175,15 @@ $footer-height: 60px;
 	width: 100%;
 }
 
-button.font-library-modal__upload-area {
+button.font-library__upload-area {
 	background-color: colors.$gray-100;
 }
 
-.font-library-modal__local-fonts {
-	margin: 0 auto;
+.font-library__local-fonts {
+	margin: variables.$grid-unit-30 auto;
 	width: 80%;
 
-	.font-library-modal__upload-area__text {
+	.font-library__upload-area__text {
 		color: colors.$gray-700;
 	}
 }
@@ -208,7 +214,7 @@ button.font-library-modal__upload-area {
 	}
 }
 
-.font-library-modal__select-all {
+.font-library__select-all {
 	padding:
 		variables.$grid-unit-20 variables.$grid-unit-20
 		variables.$grid-unit-20 variables.$grid-unit-20 +
diff --git a/packages/global-styles-ui/src/font-library-modal/types.ts b/packages/global-styles-ui/src/font-library/types.ts
similarity index 100%
rename from packages/global-styles-ui/src/font-library-modal/types.ts
rename to packages/global-styles-ui/src/font-library/types.ts
diff --git a/packages/global-styles-ui/src/font-library-modal/upload-fonts.tsx b/packages/global-styles-ui/src/font-library/upload-fonts.tsx
similarity index 96%
rename from packages/global-styles-ui/src/font-library-modal/upload-fonts.tsx
rename to packages/global-styles-ui/src/font-library/upload-fonts.tsx
index 69ed6b60eabb3e..088b6b42f898b3 100644
--- a/packages/global-styles-ui/src/font-library-modal/upload-fonts.tsx
+++ b/packages/global-styles-ui/src/font-library/upload-fonts.tsx
@@ -210,9 +210,9 @@ function UploadFonts() {
 	};
 
 	return (
-		<div className="font-library-modal__tabpanel-layout">
+		<div className="font-library__tabpanel-layout">
 			<DropZone onFilesDrop={ handleDropZone } />
-			<VStack className="font-library-modal__local-fonts">
+			<VStack className="font-library__local-fonts">
 				{ notice && (
 					<Notice
 						status={ notice.type }
@@ -231,7 +231,7 @@ function UploadFonts() {
 				) }
 				{ isUploading && (
 					<FlexItem>
-						<div className="font-library-modal__upload-area">
+						<div className="font-library__upload-area">
 							<ProgressBar />
 						</div>
 					</FlexItem>
@@ -246,7 +246,7 @@ function UploadFonts() {
 						render={ ( { openFileDialog } ) => (
 							<Button
 								__next40pxDefaultSize
-								className="font-library-modal__upload-area"
+								className="font-library__upload-area"
 								onClick={ openFileDialog }
 							>
 								{ __( 'Upload font' ) }
@@ -255,7 +255,7 @@ function UploadFonts() {
 					/>
 				) }
 				<Spacer margin={ 2 } />
-				<Text className="font-library-modal__upload-area__text">
+				<Text className="font-library__upload-area__text">
 					{ __(
 						'Uploaded fonts appear in your library and can be used in your theme. Supported formats: .ttf, .otf, .woff, and .woff2.'
 					) }
diff --git a/packages/global-styles-ui/src/font-library-modal/utils/constants.ts b/packages/global-styles-ui/src/font-library/utils/constants.ts
similarity index 100%
rename from packages/global-styles-ui/src/font-library-modal/utils/constants.ts
rename to packages/global-styles-ui/src/font-library/utils/constants.ts
diff --git a/packages/global-styles-ui/src/font-library-modal/utils/filter-fonts.ts b/packages/global-styles-ui/src/font-library/utils/filter-fonts.ts
similarity index 100%
rename from packages/global-styles-ui/src/font-library-modal/utils/filter-fonts.ts
rename to packages/global-styles-ui/src/font-library/utils/filter-fonts.ts
diff --git a/packages/global-styles-ui/src/font-library-modal/utils/fonts-outline.ts b/packages/global-styles-ui/src/font-library/utils/fonts-outline.ts
similarity index 100%
rename from packages/global-styles-ui/src/font-library-modal/utils/fonts-outline.ts
rename to packages/global-styles-ui/src/font-library/utils/fonts-outline.ts
diff --git a/packages/global-styles-ui/src/font-library-modal/utils/index.ts b/packages/global-styles-ui/src/font-library/utils/index.ts
similarity index 100%
rename from packages/global-styles-ui/src/font-library-modal/utils/index.ts
rename to packages/global-styles-ui/src/font-library/utils/index.ts
diff --git a/packages/global-styles-ui/src/font-library-modal/utils/make-families-from-faces.ts b/packages/global-styles-ui/src/font-library/utils/make-families-from-faces.ts
similarity index 100%
rename from packages/global-styles-ui/src/font-library-modal/utils/make-families-from-faces.ts
rename to packages/global-styles-ui/src/font-library/utils/make-families-from-faces.ts
diff --git a/packages/global-styles-ui/src/font-library-modal/utils/preview-styles.ts b/packages/global-styles-ui/src/font-library/utils/preview-styles.ts
similarity index 100%
rename from packages/global-styles-ui/src/font-library-modal/utils/preview-styles.ts
rename to packages/global-styles-ui/src/font-library/utils/preview-styles.ts
diff --git a/packages/global-styles-ui/src/font-library-modal/utils/set-immutably.ts b/packages/global-styles-ui/src/font-library/utils/set-immutably.ts
similarity index 100%
rename from packages/global-styles-ui/src/font-library-modal/utils/set-immutably.ts
rename to packages/global-styles-ui/src/font-library/utils/set-immutably.ts
diff --git a/packages/global-styles-ui/src/font-library-modal/utils/sort-font-faces.ts b/packages/global-styles-ui/src/font-library/utils/sort-font-faces.ts
similarity index 100%
rename from packages/global-styles-ui/src/font-library-modal/utils/sort-font-faces.ts
rename to packages/global-styles-ui/src/font-library/utils/sort-font-faces.ts
diff --git a/packages/global-styles-ui/src/font-library-modal/utils/toggleFont.ts b/packages/global-styles-ui/src/font-library/utils/toggleFont.ts
similarity index 100%
rename from packages/global-styles-ui/src/font-library-modal/utils/toggleFont.ts
rename to packages/global-styles-ui/src/font-library/utils/toggleFont.ts
diff --git a/packages/global-styles-ui/src/index.ts b/packages/global-styles-ui/src/index.ts
index 897c6ced907996..e662a7b149fbc5 100644
--- a/packages/global-styles-ui/src/index.ts
+++ b/packages/global-styles-ui/src/index.ts
@@ -5,3 +5,11 @@ export { TypographyVariations } from './typography-variations';
 
 // Ideally this should just be a core-data selector.
 export { default as useGlobalStylesRevisions } from './screen-revisions/use-global-styles-revisions';
+
+// Font Library exports
+export { FontLibrary } from './font-library/font-library';
+export { default as FontLibraryProvider } from './font-library/context';
+export { FontLibraryContext } from './font-library/context';
+export { default as InstalledFonts } from './font-library/installed-fonts';
+export { default as UploadFonts } from './font-library/upload-fonts';
+export { default as FontCollection } from './font-library/font-collection';
diff --git a/packages/global-styles-ui/src/style.scss b/packages/global-styles-ui/src/style.scss
index 19533cd52e8d79..782e4fb3c938a2 100644
--- a/packages/global-styles-ui/src/style.scss
+++ b/packages/global-styles-ui/src/style.scss
@@ -1,7 +1,7 @@
 @use "@wordpress/base-styles/variables";
 @use "@wordpress/base-styles/colors";
 @use "@wordpress/base-styles/mixins";
-@use "./font-library-modal/style.scss" as *;
+@use "./font-library/style.scss" as *;
 @use "./pagination/style.scss" as *;
 @use "./screen-revisions/style.scss" as *;
 @use "./size-control/style.scss" as *;
diff --git a/packages/global-styles-ui/src/typography-example.tsx b/packages/global-styles-ui/src/typography-example.tsx
index 0db5c79c000982..438c704911110f 100644
--- a/packages/global-styles-ui/src/typography-example.tsx
+++ b/packages/global-styles-ui/src/typography-example.tsx
@@ -9,7 +9,7 @@ import { _x } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { GlobalStylesContext } from './context';
-import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
+import { getFamilyPreviewStyle } from './font-library/utils/preview-styles';
 import { getFontFamilies } from './utils';
 import { useStyle } from './hooks';
 
diff --git a/packages/global-styles-ui/tsconfig.json b/packages/global-styles-ui/tsconfig.json
index 40ef710a2ce0d0..1241fd96bbfd3a 100644
--- a/packages/global-styles-ui/tsconfig.json
+++ b/packages/global-styles-ui/tsconfig.json
@@ -22,5 +22,5 @@
 		{ "path": "../private-apis" }
 	],
 	"include": [ "src/**/*" ],
-	"exclude": [ "src/font-library-modal/lib/**/*" ]
+	"exclude": [ "src/font-library/lib/**/*" ]
 }
diff --git a/packages/private-apis/src/implementation.ts b/packages/private-apis/src/implementation.ts
index f8179e8a1c1aa2..d46d419ffc4eb6 100644
--- a/packages/private-apis/src/implementation.ts
+++ b/packages/private-apis/src/implementation.ts
@@ -26,6 +26,7 @@ const CORE_MODULES_USING_PRIVATE_APIS = [
 	'@wordpress/edit-site',
 	'@wordpress/edit-widgets',
 	'@wordpress/editor',
+	'@wordpress/font-list-route',
 	'@wordpress/format-library',
 	'@wordpress/patterns',
 	'@wordpress/preferences',
diff --git a/routes/font-list/lock-unlock.ts b/routes/font-list/lock-unlock.ts
new file mode 100644
index 00000000000000..f3a12dea66d688
--- /dev/null
+++ b/routes/font-list/lock-unlock.ts
@@ -0,0 +1,9 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
+	'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+	'@wordpress/font-list-route'
+);
diff --git a/routes/font-list/package.json b/routes/font-list/package.json
new file mode 100644
index 00000000000000..279ba510eac060
--- /dev/null
+++ b/routes/font-list/package.json
@@ -0,0 +1,23 @@
+{
+	"name": "@wordpress/font-list-route",
+	"version": "1.0.0",
+	"private": true,
+	"route": {
+		"path": "/font-list",
+		"page": "gutenberg-boot"
+	},
+	"dependencies": {
+		"@wordpress/admin-ui": "file:../../packages/admin-ui",
+		"@wordpress/components": "file:../../packages/components",
+		"@wordpress/compose": "file:../../packages/compose",
+		"@wordpress/core-data": "file:../../packages/core-data",
+		"@wordpress/data": "file:../../packages/data",
+		"@wordpress/editor": "file:../../packages/editor",
+		"@wordpress/element": "file:../../packages/element",
+		"@wordpress/global-styles-engine": "file:../../packages/global-styles-engine",
+		"@wordpress/global-styles-ui": "file:../../packages/global-styles-ui",
+		"@wordpress/i18n": "file:../../packages/i18n",
+		"@wordpress/private-apis": "file:../../packages/private-apis",
+		"@wordpress/route": "file:../../packages/route"
+	}
+}
diff --git a/routes/font-list/stage.tsx b/routes/font-list/stage.tsx
new file mode 100644
index 00000000000000..9a743b4e61e090
--- /dev/null
+++ b/routes/font-list/stage.tsx
@@ -0,0 +1,114 @@
+/**
+ * WordPress dependencies
+ */
+import { Page } from '@wordpress/admin-ui';
+import { __ } from '@wordpress/i18n';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { FontLibrary } from '@wordpress/global-styles-ui';
+import type { FontCollection as FontCollectionType } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from './lock-unlock';
+import './style.scss';
+
+const { Tabs } = unlock( componentsPrivateApis );
+const { useGlobalStyles } = unlock( editorPrivateApis );
+
+function FontLibraryPage() {
+	const { records: collections = [] } =
+		useEntityRecords< FontCollectionType >( 'root', 'fontCollection', {
+			_fields: 'slug,name,description',
+		} );
+	const [ activeTab, setActiveTab ] = useState( 'installed-fonts' );
+
+	// Use the useGlobalStyles hook from @wordpress/editor
+	const { base, user, setUser, isReady } = useGlobalStyles();
+
+	// Check user permissions
+	const canUserCreate = useSelect( ( select ) => {
+		return select( coreStore ).canUser( 'create', {
+			kind: 'postType',
+			name: 'wp_font_family',
+		} );
+	}, [] );
+
+	// Wait for global styles to load
+	if ( ! isReady ) {
+		return null;
+	}
+
+	// Build tabs array
+	const tabs: {
+		id: string;
+		title: string;
+	}[] = [
+		{
+			id: 'installed-fonts',
+			title: __( 'Library' ),
+		},
+	];
+
+	if ( canUserCreate ) {
+		tabs.push( {
+			id: 'upload-fonts',
+			title: __( 'Upload' ),
+		} );
+		tabs.push(
+			...( collections || [] ).map( ( { slug, name } ) => ( {
+				id: slug,
+				title:
+					collections &&
+					collections.length === 1 &&
+					slug === 'google-fonts'
+						? __( 'Install Fonts' )
+						: name,
+			} ) )
+		);
+	}
+
+	return (
+		<Page title={ __( 'Fonts' ) }>
+			<Tabs
+				selectedTabId={ activeTab }
+				onSelect={ ( tabId: string ) => setActiveTab( tabId ) }
+			>
+				<div className="font-library-page__tablist">
+					<Tabs.TabList>
+						{ tabs.map( ( { id, title } ) => (
+							<Tabs.Tab key={ id } tabId={ id }>
+								{ title }
+							</Tabs.Tab>
+						) ) }
+					</Tabs.TabList>
+				</div>
+				{ tabs.map( ( { id } ) => (
+					<Tabs.TabPanel
+						key={ id }
+						tabId={ id }
+						focusable={ false }
+						className="font-library-page__tab-panel"
+					>
+						<FontLibrary
+							value={ user }
+							baseValue={ base }
+							onChange={ setUser }
+							activeTab={ id }
+						/>
+					</Tabs.TabPanel>
+				) ) }
+			</Tabs>
+		</Page>
+	);
+}
+
+function Stage() {
+	return <FontLibraryPage />;
+}
+
+export const stage = Stage;
diff --git a/routes/font-list/style.scss b/routes/font-list/style.scss
new file mode 100644
index 00000000000000..139e63d9df74cc
--- /dev/null
+++ b/routes/font-list/style.scss
@@ -0,0 +1,18 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/global-styles-ui/build-style/style.css" as *;
+
+.font-library-page__tablist {
+	border-bottom: 1px solid $gray-100;
+	padding: 0 $grid-unit-30;
+}
+
+.font-library-page__tab-panel {
+	flex-grow: 1;
+	max-height: calc(100% - 110px); // Subtracting header + tabs
+	overflow: auto;
+
+	.admin-ui-page:has(.font-library__footer) & {
+		max-height: calc(100% - 198px); // Subtracting header + tabs + footer
+	}
+}
diff --git a/routes/pattern-list/style.scss b/routes/pattern-list/style.scss
index 735118b684c761..9ad4d340f49a25 100644
--- a/routes/pattern-list/style.scss
+++ b/routes/pattern-list/style.scss
@@ -4,10 +4,7 @@
 
 .routes-pattern-list__tabs-wrapper {
 	border-bottom: 1px solid $gray-100;
-	padding: 0 $grid-unit-60;
-	@container (max-width: 430px) {
-		padding: 0 $grid-unit-30;
-	}
+	padding: 0 $grid-unit-30;
 }
 
 // Colorize synced pattern badges in grid view
diff --git a/routes/post-list/style.scss b/routes/post-list/style.scss
index 6877f66bbd050d..e71668aea484bc 100644
--- a/routes/post-list/style.scss
+++ b/routes/post-list/style.scss
@@ -4,8 +4,5 @@
 
 .routes-post-list__tabs-wrapper {
 	border-bottom: 1px solid $gray-100;
-	padding: 0 $grid-unit-60;
-	@container (max-width: 430px) {
-		padding: 0 $grid-unit-30;
-	}
+	padding: 0 $grid-unit-30;
 }
diff --git a/routes/template-list/style.scss b/routes/template-list/style.scss
index 44b6834990a6e9..52a4ce09d89d80 100644
--- a/routes/template-list/style.scss
+++ b/routes/template-list/style.scss
@@ -4,10 +4,7 @@
 
 .routes-template-list__tabs-wrapper {
 	border-bottom: 1px solid $gray-100;
-	padding: 0 $grid-unit-60;
-	@container (max-width: 430px) {
-		padding: 0 $grid-unit-30;
-	}
+	padding: 0 $grid-unit-30;
 }
 
 .routes-template-list-author-field__avatar {
diff --git a/routes/template-part-list/style.scss b/routes/template-part-list/style.scss
index 1cbb2ba2087fd7..9c0be9cddc20c3 100644
--- a/routes/template-part-list/style.scss
+++ b/routes/template-part-list/style.scss
@@ -4,8 +4,5 @@
 
 .routes-template-part-list__tabs-wrapper {
 	border-bottom: 1px solid $gray-100;
-	padding: 0 $grid-unit-60;
-	@container (max-width: 430px) {
-		padding: 0 $grid-unit-30;
-	}
+	padding: 0 $grid-unit-30;
 }