Make FontDemo clickable

packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js

@@ -47,6 +47,7 @@ function CollectionFontVariant( {
 					fontFace={ face }
 					text={ displayName }
 					checkboxId={ checkboxId }
+					onClick={ handleToggleActivation }
 				/>
 			</Flex>
 		</div>

packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js

@@ -24,6 +24,7 @@ function FontFaceDemo( {
 	fontFace,
 	text,
 	checkboxId,
+	onClick,
 	style = {},
 } ) {
 	const ref = useRef( null );
@@ -49,6 +50,9 @@ function FontFaceDemo( {
 		height: '23px',
 		width: 'auto',
 	};
+	const containerStyle = {
+		cursor: 'pointer',
+	};
 
 	useEffect( () => {
 		const observer = new window.IntersectionObserver( ( [ entry ] ) => {
@@ -71,7 +75,15 @@ function FontFaceDemo( {
 	}, [ fontFace, isIntersecting, loadFontFaceAsset, isPreviewImage ] );
 
 	return (
-		<div ref={ ref } id={ checkboxId }>
+		<div
+			ref={ ref }
+			id={ checkboxId }
+			onClick={ onClick }
+			onKeyDown={ onClick }
+			tabIndex={ -1 }
+			role="button"
+			style={ containerStyle }
+		>
 			{ isPreviewImage ? (
 				<img
 					src={ previewUrl }

packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js

@@ -57,6 +57,7 @@ function LibraryFontVariant( { face, font } ) {
 					fontFace={ face }
 					text={ displayName }
 					checkboxId={ checkboxId }
+					onClick={ handleToggleActivation }
 				/>
 			</Flex>
 		</div>