Fonts with invalid names are not displayed or installed properly

[tnottu]

Font Manager fails to display & properly install some fonts due to the Font name input (in the Add Local Font page) or the Select font dropdown option value (in the Add Google Font page) having non-standard characters or character combinations, which are not allowed in a CSS font-family value. The internal name of the font is used as a initial value for the input and dropdown option values.

Problem occurs when the internal name of the font is invalid for the purpose it is used, so loading the font is broken from the start. Failure to display the font causes confusion for the user, who may think that there is something wrong with the font itself, since the UI shows no errors or indications of a problem.

Problematic values in the font name are for example:

• A number preceded by a space, for example Exo 2. For more information, see discussion in this Stack Overflow topic
• Any special characters

Steps to reproduce:

Add Google Font:

1. Add Exo 2 font to the project via the Manage Theme Fonts > Add Google Font feature.
2. Bug: Some fallback font is displayed, but there is no indication of a problem in the UI. An error is shown in the console: DOMException: An invalid or illegal string was specified.
3. Bug: if you select some font variants and continue installing, the font is added but is not showing correctly.

Add Local Font:

1. Download Exo 2 font from Google Fonts.
2. Add one of the font files to WordPress via the Manage Theme Fonts > Add Local Fonts feature.
3. Bug: Some fallback font is displayed, but there is no indication of a problem in the UI. An error is shown in the console: DOMException: An invalid or illegal string was specified.
4. Workaround: remove the space in the prefilled Font name input value, so the value is Exo2 and then the correct font is displayed.

Suggested fix:

1. Font names which have a number preceded by a space: the generated font-family value should be wrapped to quotes, for example 'Exo 2'
2. Other non-standard characters in the name, or any other failure to display the font: Font name field should have validation and display an error message.