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

Tue Aug 22 21:10:35 UTC 2023

#59165: Font Face: Server-side @font-face styles generator and printer
-------------------------------------------------+-------------------------
 Reporter:  hellofromTonya                       |       Owner:
                                                 |  hellofromTonya
     Type:  enhancement                          |      Status:  accepted
 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          |
-------------------------------------------------+-------------------------
Changes (by hellofromTonya):

 * keywords:  gutenberg-merge needs-dev-note has-patch has-unit-tests =>
     gutenberg-merge needs-dev-note has-patch has-unit-tests has-testing-
     info

Comment:

 == Testing Instructions
 These steps define how to test the enhancement, and indicates the expected
 behavior or results.

 Twenty Twenty-Three (TT3) theme defines

 === Steps to Test

 1. Apply the patch in your local test environment.
 2. Start your local test environment. If using `wp-env` Docker
 environment, do the following:

 {{{
 npm install
 npm run build:dev
 npm run env:start
 npm run env:install
 }}}

 and then in your browser, go to localhost:8889/wp-admin to access the test
 site.
 3. Go to Appearance > Site Editor.
 4. Open Developer Tools in your browser.
 5. In the HTML / Elements tab of your browser's dev tools, search for "wp-
 fonts-local" element (which has the Twenty-TwentyThree `@font-face` CSS).
 See below for the expectations.
 6. Open the Styles UI by selecting the content area and then the Styles
 icon in the top right hand corner.
 7. Select "Typography" to open the Typography UI.
 8. Select "Headings" (or any other element).
 9. Select the "Font" dropdown to view the list of available fonts. See
 below for expectation.
 10. Change the Font to "Source Serif Pro". See below for the expectation.
 11. In your browser's dev tools, click on the Network tab. See below for
 the expectation.

 === Fonts defined in TT3
 The Twenty Twenty-Three (TT3) theme defines the following fonts in its
 `theme.json` file. These are the fonts that should appear in the Site
 Editor and `@font-face` CSS.

 List of fonts defined in TT3:
 * DM Sans with 3 different fontFace variations:
    * `font-style:normal`, `font-weight:400`, and the `src` is in the
 theme's `assets/fonts/dm-sans/DMSans-Regular.woff2`.
    * `font-style:italic`, `font-weight:400`, and the `src` is in the
 theme's `assets/fonts/dm-sans/DMSans-Regular-Italic.woff2`.
    * `font-style:normal`, `font-weight:700`, and the `src` is in the
 theme's `assets/fonts/dm-sans/DMSans-Bold.woff2`.
 * IBM Plex Mono with 4 variations:
    * `font-style:normal`, `font-weight:300`, `font-display:block`, and the
 `src` is in the theme's `assets/fonts/ibm-plex-mono/IBMPlexMono-
 Light.woff2`.
    * `font-style:normal`, `font-weight:400`, `font-display:block`, and the
 `src` is in the theme's `assets/fonts/ibm-plex-mono/IBMPlexMono-
 Regular.woff2`.
    * `font-style:italic`, `font-weight:400`, `font-display:block`, and the
 `src` is in the theme's `assets/fonts/ibm-plex-mono/IBMPlexMono-
 Italic.woff2`.
    * `font-style:normal`, `font-weight:700`, `font-display:block`, and the
 `src` is in the theme's `assets/fonts/ibm-plex-mono/IBMPlexMono-
 Bold.woff2`.
 * Inter with 1 variation:
    * `font-style:normal`, `font-weight:200 900`, `font-display:block`, and
 the `src` is in the theme's `assets/fonts/inter/Inter-
 VariableFont_slnt,wght.ttf`.
 * Source Serif Pro with 2 variations:
    * `font-style:normal`, `font-weight:200 900`, and the `src` is in the
 theme's `assets/fonts/source-serif-pro/SourceSerif4Variable-
 Roman.ttf.woff2`.
    * `font-style:italic`, `font-weight:200 900`, and the `src` is in the
 theme's `assets/fonts/source-serif-pro/SourceSerif4Variable-
 Italic.ttf.woff2`.

 === Expected Results
 Here is the list of expectations for each testing step above. This is what
 should happen for each of these steps:

 - ✅ At Step 5, the `<style id="wp-fonts-local">` element should be in the
 main document's `head`, i.e. `head > style#wp-fonts-local`.

 - ✅ At Step 5, the `<style id="wp-fonts-local">` element should be in the
 iframed editor's `head`, i.e. `and the `iframe.edit-site-visual-
 editor__editor-canvas > html > head > style#wp-fonts-local`.

 - ✅ At Step 5, both `<style id="wp-fonts-local">` elements should contain
 the same CSS which should be the following:

 {{{
 <style id="wp-fonts-local">
 @font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-
 display:fallback;src:url('http://localhost:8889/wp-
 content/themes/twentytwentythree/assets/fonts/dm-sans/DMSans-
 Regular.woff2') format('woff2');font-stretch:normal;}
 @font-face{font-family:"DM Sans";font-style:italic;font-weight:400;font-
 display:fallback;src:url('http://localhost:8889/wp-
 content/themes/twentytwentythree/assets/fonts/dm-sans/DMSans-Regular-
 Italic.woff2') format('woff2');font-stretch:normal;}
 @font-face{font-family:"DM Sans";font-style:normal;font-weight:700;font-
 display:fallback;src:url('http://localhost:8889/wp-
 content/themes/twentytwentythree/assets/fonts/dm-sans/DMSans-Bold.woff2')
 format('woff2');font-stretch:normal;}
 @font-face{font-family:"DM Sans";font-style:italic;font-weight:700;font-
 display:fallback;src:url('http://localhost:8889/wp-
 content/themes/twentytwentythree/assets/fonts/dm-sans/DMSans-Bold-
 Italic.woff2') format('woff2');font-stretch:normal;}
 @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:300
 ;font-display:block;src:url('http://localhost:8889/wp-
 content/themes/twentytwentythree/assets/fonts/ibm-plex-mono/IBMPlexMono-
 Light.woff2') format('woff2');font-stretch:normal;}
 @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400
 ;font-display:block;src:url('http://localhost:8889/wp-
 content/themes/twentytwentythree/assets/fonts/ibm-plex-mono/IBMPlexMono-
 Regular.woff2') format('woff2');font-stretch:normal;}
 @font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:400
 ;font-display:block;src:url('http://localhost:8889/wp-
 content/themes/twentytwentythree/assets/fonts/ibm-plex-mono/IBMPlexMono-
 Italic.woff2') format('woff2');font-stretch:normal;}
 @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:700
 ;font-display:block;src:url('http://localhost:8889/wp-
 content/themes/twentytwentythree/assets/fonts/ibm-plex-mono/IBMPlexMono-
 Bold.woff2') format('woff2');font-stretch:normal;}
 @font-face{font-family:Inter;font-style:normal;font-weight:200 900;font-
 display:fallback;src:url('http://localhost:8889/wp-
 content/themes/twentytwentythree/assets/fonts/inter/Inter-
 VariableFont_slnt,wght.ttf') format('truetype');font-stretch:normal;}
 @font-face{font-family:"Source Serif Pro";font-style:normal;font-
 weight:200 900;font-display:fallback;src:url('http://localhost:8889/wp-
 content/themes/twentytwentythree/assets/fonts/source-serif-pro
 /SourceSerif4Variable-Roman.ttf.woff2') format('woff2');font-
 stretch:normal;}
 @font-face{font-family:"Source Serif Pro";font-style:italic;font-
 weight:200 900;font-display:fallback;src:url('http://localhost:8889/wp-
 content/themes/twentytwentythree/assets/fonts/source-serif-pro
 /SourceSerif4Variable-Italic.ttf.woff2') format('woff2');font-
 stretch:normal;}
 </style>
 }}}

 Note: `http://localhost:8889` may be different if you're using a different
 localhost URL or provider.

 - ✅ At Step 9, the list of fonts should be:
    - Default
    - DM Sans
    - IBM Plex Mono
    - Inter
    - System Font
    - Source Serif Pro

 - ✅ At Step 10, the heading "Mindblown: a blog about philosophy." with
 the Source Serif Pro font selected should render to visually look like the
 same font on the
 [https://fonts.google.com/specimen/Source+Serif+4?preview.text=Mindblown:%20a%20blog%20about%20philosophy.&preview.text_type=custom&query=source+serif
 Google Fonts UI page].

 - ✅ At Step 11, "SourceSerif4Variable-Roman.tff.woff2" should appear in
 your browser's Network tab with a 200 Status and Type of "font". Note: You
 may need to refresh your browser.

   **Test Report Icons:**
   ✅ <= Behavior is ''expected''.
   ❌ <= Behavior is ''NOT expected''.

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