Add fonts to theme assets when a style variation is created.

[matiasbenedetto]

What?

If you create a style variation containing a font installed using the font library, the assets linked in the style variation JSON file link to the assets in the uploads folder; the font assets are not copied to the theme folder.

Expected

• The font assets should be added to the theme folder.
• The assets referenced in the style variation JSON should point to the theme assets.

Example

Example of a current (wrong) style variation:

{
	"settings": {
		"typography": {
			"fontFamilies": [
				{
					"fontFace": [
						{
							"fontFamily": "Roboto",
							"fontStyle": "normal",
							"fontWeight": "400",
							"src": "http://localhost/humanity-theme/wp-content/uploads/fonts/KFOmCnqEu92Fr1Me4GZLCzYlKw.woff2"
						},
						{
							"fontFamily": "Roboto",
							"fontStyle": "normal",
							"fontWeight": "700",
							"src": "http://localhost/humanity-theme/wp-content/uploads/fonts/KFOlCnqEu92Fr1MmWUlvBh05IsDqlA.woff2"
						},
						{
							"fontFamily": "Roboto",
							"fontStyle": "italic",
							"fontWeight": "400",
							"src": "http://localhost/humanity-theme/wp-content/uploads/fonts/KFOkCnqEu92Fr1Mu52xKKTM1K9nz.woff2"
						},
						{
							"fontFamily": "Roboto",
							"fontStyle": "italic",
							"fontWeight": "700",
							"src": "http://localhost/humanity-theme/wp-content/uploads/fonts/KFOjCnqEu92Fr1Mu51TzBhc4AMX6lJBP.woff2"
						},
						{
							"fontFamily": "Roboto",
							"fontStyle": "normal",
							"fontWeight": "100",
							"src": "http://localhost/humanity-theme/wp-content/uploads/fonts/KFOkCnqEu92Fr1MmgWxKKTM1K9nz.woff2"
						},
						{
							"fontFamily": "Roboto",
							"fontStyle": "italic",
							"fontWeight": "100",
							"src": "http://localhost/humanity-theme/wp-content/uploads/fonts/KFOiCnqEu92Fr1Mu51QrIzIXLsnzjYk.woff2"
						}
					],
					"fontFamily": "Roboto, sans-serif",
					"name": "Roboto",
					"slug": "roboto"
				},
				{
					"fontFace": [
						{
							"fontFamily": "\"Roboto Condensed\"",
							"fontStyle": "normal",
							"fontWeight": "400",
							"src": "http://localhost/humanity-theme/wp-content/uploads/fonts/ieVo2ZhZI2eCN5jzbjEETS9weq8-_d6T_POl0fRJeyWyovBM731BKMSK.woff2"
						},
						{
							"fontFamily": "\"Roboto Condensed\"",
							"fontStyle": "normal",
							"fontWeight": "700",
							"src": "http://localhost/humanity-theme/wp-content/uploads/fonts/ieVo2ZhZI2eCN5jzbjEETS9weq8-_d6T_POl0fRJeyVVpfBM731BKMSK.woff2"
						},
						{
							"fontFamily": "\"Roboto Condensed\"",
							"fontStyle": "italic",
							"fontWeight": "400",
							"src": "http://localhost/humanity-theme/wp-content/uploads/fonts/ieVW2ZhZI2eCN5jzbjEETS9weq8-19ehAyvMum7nfDB64RgK5XxjLdSK37o.woff2"
						},
						{
							"fontFamily": "\"Roboto Condensed\"",
							"fontStyle": "italic",
							"fontWeight": "700",
							"src": "http://localhost/humanity-theme/wp-content/uploads/fonts/ieVW2ZhZI2eCN5jzbjEETS9weq8-19ehAyvMum7nfDB64f8N5XxjLdSK37o.woff2"
						},
						{
							"fontFamily": "\"Roboto Condensed\"",
							"fontStyle": "normal",
							"fontWeight": "200",
							"src": "http://localhost/humanity-theme/wp-content/uploads/fonts/ieVo2ZhZI2eCN5jzbjEETS9weq8-_d6T_POl0fRJeyUyovBM731BKMSK.woff2"
						},
						{
							"fontFamily": "\"Roboto Condensed\"",
							"fontStyle": "italic",
							"fontWeight": "200",
							"src": "http://localhost/humanity-theme/wp-content/uploads/fonts/ieVW2ZhZI2eCN5jzbjEETS9weq8-19ehAyvMum7nfDB64ZgK5XxjLdSK37o.woff2"
						}
					],
					"fontFamily": "\"Roboto Condensed\", sans-serif",
					"name": "Roboto Condensed",
					"slug": "roboto-condensed"
				}
			]
		}
	},
	"title": "Roboto",
	"version": 3,
	"$schema": "https://schemas.wp.org/wp/6.6/theme.json"
}

[colorful-tones]

I had to try quite a few things before landing on a scenario to recreate the issue.

Here are the steps:

With Gutenberg trunk plugin, Create Block Theme and Twenty Twenty-Four theme:

1. Visit Appearance > Create Block Theme and choose 'Create a Clone of "Twenty Twenty-Four"'
2. Open Site Editor (wp-admin/site-editor.php?canvas=edit), open global 'Styles' in sidebar > Typography > Manage Fonts to launch Font Library.
3. Select 'Install Fonts' tab, search and choose a new font to install, and 'Install' it.
4. Close the Font Library modal. At the bottom of the Typography section of Global Styles under Elements choose 'Headings' and assign your newly installed font as the default font for headings, and be sure to 'Save' your changes in the Site Editor.
5. Choose the Create Block Theme (🔧 wrench icon) menu > Create Theme Variation > give your variation a name and then 'Save Theme Variation'.
6. Open the newly created styles/whatever.json in your theme and you'll notice paths for your newly installed font are of the format: https://your-local.local/wp-content/uploads/fonts/K2FyfZJVlfNNSEBXGb7WCI6oBjLz.woff2, as opposed to file:./assets/fonts/K2FyfZJVlfNNSEBXGb7WCI6oBjLz.woff2