diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
index fea8ef02911e15..ba17ee5df84290 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
@@ -1,18 +1,13 @@
 /**
  * WordPress dependencies
  */
-import {
-	CheckboxControl,
-	Flex,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+import { CheckboxControl, Flex } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { getFontFaceVariantName } from './utils';
 import FontFaceDemo from './font-demo';
-import { unlock } from '../../../lock-unlock';
 
 function CollectionFontVariant( {
 	face,
@@ -29,10 +24,6 @@ function CollectionFontVariant( {
 	};
 
 	const displayName = font.name + ' ' + getFontFaceVariantName( face );
-	const { kebabCase } = unlock( componentsPrivateApis );
-	const checkboxId = kebabCase(
-		`${ font.slug }-${ getFontFaceVariantName( face ) }`
-	);
 
 	return (
 		<div className="font-library-modal__library-font-variant">
@@ -46,7 +37,6 @@ function CollectionFontVariant( {
 				<FontFaceDemo
 					fontFace={ face }
 					text={ displayName }
-					checkboxId={ checkboxId }
 					onClick={ handleToggleActivation }
 				/>
 			</Flex>
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
index 788f03ceab70c8..f052af2cba5cc9 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
@@ -23,7 +23,6 @@ function FontFaceDemo( {
 	customPreviewUrl,
 	fontFace,
 	text,
-	checkboxId,
 	onClick,
 	style = {},
 } ) {
@@ -77,7 +76,6 @@ function FontFaceDemo( {
 	return (
 		<div
 			ref={ ref }
-			id={ checkboxId }
 			onClick={ onClick }
 			onKeyDown={ onClick }
 			tabIndex={ -1 }
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
index ea26659592a4b9..bd4fc0760c833e 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
@@ -2,11 +2,7 @@
  * WordPress dependencies
  */
 import { useContext } from '@wordpress/element';
-import {
-	CheckboxControl,
-	Flex,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+import { CheckboxControl, Flex } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -14,7 +10,6 @@ import {
 import { getFontFaceVariantName } from './utils';
 import { FontLibraryContext } from './context';
 import FontFaceDemo from './font-demo';
-import { unlock } from '../../../lock-unlock';
 
 function LibraryFontVariant( { face, font } ) {
 	const { isFontActivated, toggleActivateFont } =
@@ -39,10 +34,6 @@ function LibraryFontVariant( { face, font } ) {
 	};
 
 	const displayName = font.name + ' ' + getFontFaceVariantName( face );
-	const { kebabCase } = unlock( componentsPrivateApis );
-	const checkboxId = kebabCase(
-		`${ font.slug }-${ getFontFaceVariantName( face ) }`
-	);
 
 	return (
 		<div className="font-library-modal__library-font-variant">
@@ -56,7 +47,6 @@ function LibraryFontVariant( { face, font } ) {
 				<FontFaceDemo
 					fontFace={ face }
 					text={ displayName }
-					checkboxId={ checkboxId }
 					onClick={ handleToggleActivation }
 				/>
 			</Flex>