[wp-trac] [WordPress Trac] #59165: Font Face: Server-side @font-face styles generator and printer

[WordPress Trac]

#59165: Font Face: Server-side @font-face styles generator and printer
-------------------------------------------------+-------------------------
 Reporter:  hellofromTonya                       |       Owner:
                                                 |  hellofromTonya
     Type:  enhancement                          |      Status:  reopened
 Priority:  normal                               |   Milestone:  6.4
Component:  General                              |     Version:
 Severity:  normal                               |  Resolution:
 Keywords:  gutenberg-merge needs-dev-note has-  |     Focuses:
  patch has-unit-tests has-testing-info has-     |
  screenshots                                    |
-------------------------------------------------+-------------------------

Comment (by ironprogrammer):

 == Test Report

 Patch tested: https://github.com/WordPress/wordpress-develop/pull/5298

 === Steps to Test
 ''Test steps adapted from the
 [https://github.com/WordPress/gutenberg/pull/54615 original GB PR].''

 1. If your test environment has been used to test Gutenberg PRs, check for
 and delete any rows in the `wp_posts` table where `post_name = 'wp-global-
 styles-twentytwentythree'` to prevent interference from cached global
 styles.
 2. Activate the Twenty-Twenty-Three (TT3) theme.
 3. In the TT3 theme's directory, open `theme.json` in an editor and modify
 it in the following ways, saving the file after each change and checking
 Step 4:
   - Scroll to line 152 and delete the line: `"name": "DM Sans",`
   - Change the order of the fonts provided in `fontFamily`, or add a new
 one before "DM Sans".
   - Give the `name` property a different name from "DM Sans".
 4. Refresh the browser, view the HTML, and inspect the `#wp-fonts-local`
 style element after each change.

 === Expected Results
 - ✅ After removing the `name` property, "DM Sans" remains listed in the
 `#wp-fonts-local` element's `@font-face` definitions.
 - ✅ For `fontFamily` props containing multiple fonts, only the first one
 is used in the `@font-face` definition.
 - ✅ The `name` prop does not affect the name of the generated `@font-
 face`.

 === Environment
 - Hardware: MacBook Pro Apple M1 Pro
 - OS: macOS 13.5.2
 - Browser: Safari 16.6, Google Chrome 117.0.5938.88
 - Server: nginx/1.25.2
 - PHP: 7.4.33
 - WordPress: 6.4-alpha-56267-src
 - Theme: twentytwentythree v1.2
 - Active Plugins: none

 === Actual Results
 - ✅ DM Sans was included in `#wp-fonts-local`.
 - ✅ Only the first comma-delimited value in the `fontFamily` prop is used
 for the final `@font-face`. The value can be double-, single-, or non-
 quoted.
 - ✅ Specifying a different value for the `name` prop does not affect the
 final generated `@font-face`.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/59165#comment:29>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform