Webfonts API outputs only the first @font-face of a theme.json defined font-family in frontend

[jakobwiens7]

Description

While working on a project, i noticed that my font styles were not displaying as they should (italic style was simulated and font weights other than regular weren't working at all).
I then realized, that apparently only the first @font-face declaration of a webfont is being output in frontend when you register them via theme.json.
It works as expected in the editor, where every style is being enqeued and therefore displayed properly.
I also was able to reproduce the issue on a fresh local WordPress installation with just the Gutenberg plugin and the TT2 theme.

What i expect:
Every @font-face declaration in a font-family is being registered and output (at least when they're used on the current page).

What actually happens:
Only the first @font-face in a font-family definition is being output (frontend only).

Step-by-step reproduction instructions

1. Follow the testing instructions mentioned in Webfonts API #37140
   (or just define a fontFamily with more than one fontFace declaration in theme.json[settings][typography][fontFamilies])
2. Inspect the html output inline style webfonts-inline-css

Screenshots, screen recording, code snippet

"fontFamilies": [
  {
	  "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
	  "name": "System Font",
	  "slug": "system-font"
  },
  {
	  "fontFamily": "\"Source Serif Pero\", serif",
	  "name": "Source Serif Pero",
	  "slug": "source-serif-pero",
	  "fontFace": [
		  {
			  "fontFamily": "Source Serif Pero",
			  "fontWeight": "200 900",
			  "fontStyle": "normal",
			  "fontStretch": "normal",
			  "src": [ "file:./assets/fonts/SourceSerif4Variable-Roman.ttf.woff2" ]
		  },
		  {
			  "fontFamily": "Source Serif Pero",
			  "fontWeight": "200 900",
			  "fontStyle": "italic",
			  "fontStretch": "normal",
			  "src": [ "file:./assets/fonts/SourceSerif4Variable-Italic.ttf.woff2" ]
		  }
	  ]
  }
],

The above theme.json[settings][typography][fontFamilies] definition outputs the following style in frontend:

(Notice the missing italic style @font-face declaration)

Environment info

• WordPress v5.9.3, Gutenberg v13.0, Twenty Twenty-Two v1.1
• Chrome, Firefox
• Windows 10 Desktop

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[jakobwiens7]

And i'm having even more trouble using wp_register_webfonts to add webfonts.
In frontend the inline style with the @font-face declarations is not being printed out at all - but again, in the editor this is working properly, as all font-faces seem to be enqeued and displayed.

I am really not sure what i could be missing here since i followed the testing instructions in #37140 very closely (including the suggestions mentioned in #37140 (review)).

[skorasaurus]

PR for this at #40489