Upload Fonts: Invalid parameter(s): font_family_settings

[benniledl]

Hello,
as I try to upload fonts in woff2 format, I get the error message.
Invalid parameter(s): font_family_settings

I have uploaded the same font (same name) earlier in a ttf format and have deleted it to replace it with a woff2 version.
When I now upload the woff2 font I get the error:

{
   "code":"rest_invalid_param",
   "message":"Invalid parameter(s): font_family_settings",
   "data":{
      "status":400,
      "params":{
         "font_family_settings":"font_family_settings[ slug ] cannot be empty."
      },
      "details":{
         "font_family_settings":{
            "code":"rest_invalid_param",
            "message":"font_family_settings[ slug ] cannot be empty.",
            "data":{
               "status":400
            }
         }
      }
   }
}

When I upload the ttf font again and then the woff2 font, it works.

I found out the reason why this is happening is because the font name is missing in the metadata of the font. ​https://fontdrop.info/

If this happens, it would be nice to have the option to select the name yourself.

[benniledl]

As per w3.org specification the name in the metadata is optional, so this is a valid bug of WordPress:

WOFF2:

The WOFF2 file MAY contain a block of extended metadata. The interpretation of this block is exactly the same as [WOFF 1].
​https://www.w3.org/TR/WOFF2/#Metadata

WOFF1:

Zero or more name elements may be used to provide a human-friendly name for the collection of extended metadata items in an extension element. A user agent that displays metadata SHOULD choose the name with most the appropriate language from among those available for each named extension element. This child element is OPTIONAL in extension elements; anonymous extension elements are also permissible.
​https://www.w3.org/TR/2012/REC-WOFF-20121213/#Metadata

[mathieulamiotwpmedia]

woff2 file causing the issue

[mathieulamiotwpmedia]

Reproduced_issue_screenshot

[mathieulamiotwpmedia]

Reproduction Report

Description

This report validates whether a related issue can be reproduced. The exact reported error could not be reproduced, but a bad behavior was seen.

Environment

• WordPress: 6.5.4
• PHP: 8.1.23
• Server: nginx/1.16.0
• Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.23)
• Browser: Chrome 125.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Four 1.1
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.1.0

Steps to Reproduce

1. Generate a woff2 font with missing Font Family metadata. To do this, I uploaded

   /wp-content/themes/twentytwentyfour/assets/fonts/cardo/cardo_italic_400.woff2
   

to ​https://products.aspose.app/font/metadata/woff2, emptied the "Font Family" field, then saved to download the modified font file.

2. Navigate to the Font upload pop-up:
   • Go on the WP Admin dashboard, into Appearance -> Theme.
   • Click "Customize" on the currently applied theme.
   • Click on the a part of the page to move to the page editor.
   • In the "Styles" menu on the left, click on Typography.
   • Click the "settings/configuration" icon next to "Fonts" to open a font management pop-up.
   • Go to the "Upload" tab.
3. 🐞 Upload the modified file you generated at step 1. The loading animation starts.

Expected Results

1. ✅ The loading animation disappears after a few seconds. The following message is displayed: Fonts were installed successfully.
2. The font is added to the font library and available to be used.

Actual Results

1. ❌ The loading animation never ends. No error messages are displayed.
2. ❌ The font is not added to the font library.

Additional Notes

• I could not find the error reported by the ticket creator.
• Unlike the original description, a woff2 file with Font Name metadata missing worked as expected (same reproduction step, but emptying Font Name instead of Font Family in step 1).

Supplemental Artifacts

• Attached Woff2 file reproducing the issue (from step 1): cardo_italic_400_noFamily.woff2
• Attached screenshot of Actual Result 1

[benniledl]

1. The case where the loading animation never ends, is caused by a javascript error that results from the missing metadata field.

2. In the other case where the originally reported error occurs the metadata field is not empty but seems to be an invalid character.

[benniledl]

Metadata of file where the animation never ends

[benniledl]

Metadata of file where an error occurs

[mikachan]

Thanks for the report! As this is related to the Editor, there should be a corresponding issue opened for it in the Gutenberg repo: ​https://github.com/WordPress/gutenberg/issues/new/choose.

Would you mind creating an issue there? If not, let me know and I'm happy to open one.

[benniledl]

I have created an issue at ​https://github.com/WordPress/gutenberg/issues/62701

[mikachan]

Thank you! I've added the issue to the wider Font Library Iteration issue (​https://github.com/WordPress/gutenberg/issues/60528).