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 db9e3cb402561b..5c814255f992a4 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
@@ -179,15 +179,13 @@ function FontCollection( { slug } ) {
 		setNotice( null );
 
 		const fontFamily = fontsToInstall[ 0 ];
-
 		try {
 			if ( fontFamily?.fontFace ) {
 				await Promise.all(
 					fontFamily.fontFace.map( async ( fontFace ) => {
 						if ( fontFace.src ) {
-							fontFace.file = await downloadFontFaceAssets(
-								fontFace.src
-							);
+							fontFace.file =
+								await downloadFontFaceAssets( fontFace );
 						}
 					} )
 				);
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js
index 1ca7bb68c87a06..0dfda837546a88 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js
@@ -280,12 +280,34 @@ export async function batchInstallFontFaces( fontFamilyId, fontFacesData ) {
 	return results;
 }
 
+/*
+ * Makes a font face filename based on the font face properties.
+ */
+function makeFileNameFromFontFace( fontFace ) {
+	const properties = [
+		'fontFamily',
+		'fontStyle',
+		'fontWeight',
+		'unicodeRange',
+	];
+	let name = properties.reduce( ( acc, property ) => {
+		if ( fontFace?.[ property ] ) {
+			acc += `${ fontFace[ property ] }-`;
+		}
+		return acc;
+	}, '' );
+	// Remove the last dash
+	name = name.slice( 0, -1 );
+	// Slugify the name
+	return kebabCase( name );
+}
+
 /*
  * Downloads a font face asset from a URL to the client and returns a File object.
  */
-export async function downloadFontFaceAssets( src ) {
+export async function downloadFontFaceAssets( fontFace ) {
 	// Normalize to an array, since `src` could be a string or array.
-	src = Array.isArray( src ) ? src : [ src ];
+	const src = Array.isArray( fontFace.src ) ? fontFace.src : [ fontFace.src ];
 
 	const files = await Promise.all(
 		src.map( async ( url ) => {
@@ -299,7 +321,9 @@ export async function downloadFontFaceAssets( src ) {
 					return response.blob();
 				} )
 				.then( ( blob ) => {
-					const filename = url.split( '/' ).pop();
+					const name = makeFileNameFromFontFace( fontFace );
+					const extension = url.split( '.' ).pop();
+					const filename = `${ name }.${ extension }`;
 					const file = new File( [ blob ], filename, {
 						type: blob.type,
 					} );
@@ -307,7 +331,6 @@ export async function downloadFontFaceAssets( src ) {
 				} );
 		} )
 	);
-
 	// If we only have one file return it (not the array).  Otherwise return all of them in the array.
 	return files.length === 1 ? files[ 0 ] : files;
 }