Display guidance text when there is no font (#56825)

* #56734 When there is no font, the border should not appear. Display further guidance text.

* update text

* Fix formatting in font-families.js

* Improve readability

---------

Co-authored-by: Matias Benedetto <matias.benedetto@gmail.com>
Co-authored-by: Sarah Norris <sarah@sekai.co.uk>

packages/edit-site/src/components/global-styles/font-families.js

@@ -26,6 +26,8 @@ function FontFamilies() {
 	const { modalTabOpen, toggleModal, themeFonts, customFonts } =
 		useContext( FontLibraryContext );
 
+	const hasFonts = 0 < customFonts.length || 0 < themeFonts.length;
+
 	return (
 		<>
 			{ !! modalTabOpen && (
@@ -51,14 +53,18 @@ function FontFamilies() {
 						</Tooltip>
 					</HStack>
 				</HStack>
-				<ItemGroup isBordered isSeparated>
-					{ customFonts.map( ( font ) => (
-						<FontFamilyItem key={ font.slug } font={ font } />
-					) ) }
-					{ themeFonts.map( ( font ) => (
-						<FontFamilyItem key={ font.slug } font={ font } />
-					) ) }
-				</ItemGroup>
+				{ hasFonts ? (
+					<ItemGroup isBordered isSeparated>
+						{ customFonts.map( ( font ) => (
+							<FontFamilyItem key={ font.slug } font={ font } />
+						) ) }
+						{ themeFonts.map( ( font ) => (
+							<FontFamilyItem key={ font.slug } font={ font } />
+						) ) }
+					</ItemGroup>
+				) : (
+					<>{ __( 'No fonts installed.' ) }</>
+				) }
 			</VStack>
 		</>
 	);