Add quotes to font family names

src/google-fonts/font-variant.js

@@ -1,6 +1,6 @@
 import { useEffect } from '@wordpress/element';
 import Demo from '../demo-text-input/demo';
-import { localizeFontStyle } from '../utils';
+import { addQuotesToName, localizeFontStyle } from '../utils';
 
 function FontVariant( { font, variant, isSelected, handleToggle } ) {
 	const style = variant.includes( 'italic' ) ? 'italic' : 'normal';
@@ -17,21 +17,30 @@ function FontVariant( { font, variant, isSelected, handleToggle } ) {
 	};
 
 	useEffect( () => {
-		const newFont = new FontFace( font.family, `url( ${ variantUrl } )`, {
-			style,
-			weight,
-		} );
-		newFont
-			.load()
-			.then( function ( loadedFace ) {
+		const sanitizedFontFamily = addQuotesToName( font.family );
+
+		const newFont = new FontFace(
+			sanitizedFontFamily,
+			`url( ${ variantUrl } )`,
+			{
+				style,
+				weight,
+			}
+		);
+
+		const loadNewFont = async () => {
+			try {
+				const loadedFace = await newFont.load();
 				document.fonts.add( loadedFace );
-			} )
-			.catch( function ( error ) {
+			} catch ( error ) {
 				// TODO: show error in the UI
 				// eslint-disable-next-line
 				console.error( error );
-			} );
-	}, [ font, variant ] );
+			}
+		};
+
+		loadNewFont();
+	}, [ font, style, variant, variantUrl, weight ] );
 
 	const formattedFontFamily = font.family.toLowerCase().replace( ' ', '-' );
 	const fontId = `${ formattedFontFamily }-${ variant }`;

src/local-fonts/index.js

@@ -1,11 +1,12 @@
 import { __ } from '@wordpress/i18n';
-import { useEffect, useState } from '@wordpress/element';
+import { useCallback, useEffect, useState } from '@wordpress/element';
 import UploadFontForm from './upload-font-form';
 import './local-fonts.css';
 import DemoTextInput from '../demo-text-input';
 import Demo from '../demo-text-input/demo';
 import { variableAxesToCss } from '../demo-text-input/utils';
 import BackButton from '../manage-fonts/back-button';
+import { addQuotesToName } from '../utils';
 
 const INITIAL_FORM_DATA = {
 	file: null,
@@ -33,11 +34,19 @@ function LocalFonts() {
 		setAxes( newAxes );
 	};
 
-	const isFormValid = () => {
-		return (
-			formData.file && formData.name && formData.weight && formData.style
-		);
-	};
+	const isFormValid = useCallback( () => {
+		// Check if font name is present and is alphanumeric.
+		const alphanumericRegex = /^[a-z0-9 ]+$/i;
+
+		if (
+			! formData.name ||
+			( formData.name && ! alphanumericRegex.test( formData.name ) )
+		) {
+			return false;
+		}
+
+		return formData.file && formData.weight && formData.style;
+	}, [ formData ] );
 
 	const demoStyle = () => {
 		if ( ! isFormValid() ) {
@@ -54,32 +63,32 @@ function LocalFonts() {
 		return style;
 	};
 
-	// load the local font in the browser to make the preview work
-	const onFormDataChange = async () => {
-		if ( ! isFormValid() ) {
-			return;
-		}
+	useEffect( () => {
+		// load the local font in the browser to make the preview work
+		const onFormDataChange = async () => {
+			if ( ! isFormValid() ) {
+				return;
+			}
 
-		const data = await formData.file.arrayBuffer();
-		const newFont = new FontFace( formData.name, data, {
-			style: formData.style,
-			weight: formData.weight,
-		} );
-		newFont
-			.load()
-			.then( function ( loadedFace ) {
+			const data = await formData.file.arrayBuffer();
+			const sanitizedFontFamily = addQuotesToName( formData.name );
+			const newFont = new FontFace( sanitizedFontFamily, data, {
+				style: formData.style,
+				weight: formData.weight,
+			} );
+
+			try {
+				const loadedFace = await newFont.load();
 				document.fonts.add( loadedFace );
-			} )
-			.catch( function ( error ) {
+			} catch ( error ) {
 				// TODO: show error in the UI
 				// eslint-disable-next-line
 				console.error( error );
-			} );
-	};
+			}
+		};
 
-	useEffect( () => {
 		onFormDataChange();
-	}, [ formData ] );
+	}, [ formData, isFormValid ] );
 
 	return (
 		<div className="layout">

src/utils.js

@@ -76,3 +76,22 @@ export async function downloadFile( response ) {
 		}, 100 );
 	}
 }
+
+/*
+ * Trim a string.
+ * @param {string} str The string to trim.
+ * @return {string} The trimmed string.
+ */
+export function trim( str ) {
+	str.trim();
+}
+
+/*
+ * Add quotes to fon name if it ends with a number.
+ * @param {string} familyName The font family name.
+ * @return {string} The font family name with quotes if it ends with a number.
+ */
+
+export function addQuotesToName( familyName ) {
+	return trim( familyName.match( /\d$/ ) ? `'${ familyName }'` : familyName );
+}