Changeset 55314

Timestamp:

02/13/2023 02:31:06 PM (20 months ago)

Author:

hellofromTonya

Message:

Themes: Remove local() from @font-face styles in _wp_theme_json_webfonts_handler().

Removes adding local() as a @font-face src within _wp_theme_json_webfonts_handler().

Why?

To fix font incompatibilities when a user has the font-family locally installed on their viewing computer or device. It's unknown if all of the font-face variations specified by theme.json and/or global styles are:

• installed on the user's computer/device.
• and in one file or multiple files.

The previous implementation used the src specified when registering the font with the API. That src will likely vary from user computer/device to user computer/device.

To avoid these unknowns which could cause incompatibilities or styling issues, this changeset removes adding local() to the generated font-face CSS styles.

References:

• ​Gutenberg PR 47254

Follow-up to [53282].

Props luehrsen, aristath, ehtmlu, hellofromTonya, wetah.
Fixes #57430.

Location:

trunk

Files:

• src/wp-includes/script-loader.php (modified) (3 diffs)
• tests/phpunit/tests/webfonts/wpThemeJsonWebfontsHandler.php (modified) (2 diffs)

trunk/src/wp-includes/script-loader.php

@@ -3521 +3521 @@
      *
      * @since 6.0.0
+     * @since 6.2.0 Removed local() CSS.
      *
      * @param string $font_family Font family.
@@ -3527 +3528 @@
      */
     $fn_compile_src = static function( $font_family, array $value ) {
-        $src = "local($font_family)";
+        $src = '';
 
         foreach ( $value as $item ) {
@@ -3542 +3543 @@
                 : ", url('{$item['url']}') format('{$item['format']}')";
         }
+
+        $src = ltrim( $src, ', ' );
 
         return $src;

trunk/tests/phpunit/tests/webfonts/wpThemeJsonWebfontsHandler.php

@@ -77 +77 @@
      * @ticket 55567
      * @ticket 46370
+     * @ticket 57430
      */
     public function test_font_face_generated_from_themejson() {
@@ -83 +84 @@
         $expected = <<<EOF
 <style id='wp-webfonts-inline-css' type='text/css'>
-@font-face{font-family:"Source Serif Pro";font-style:normal;font-weight:200 900;font-display:fallback;src:local("Source Serif Pro"), url('THEME_ROOT_URL/assets/fonts/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:local("Source Serif Pro"), url('THEME_ROOT_URL/assets/fonts/SourceSerif4Variable-Italic.ttf.woff2') format('woff2');font-stretch:normal;}
+@font-face{font-family:"Source Serif Pro";font-style:normal;font-weight:200 900;font-display:fallback;src:url('THEME_ROOT_URL/assets/fonts/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('THEME_ROOT_URL/assets/fonts/SourceSerif4Variable-Italic.ttf.woff2') format('woff2');font-stretch:normal;}
 </style>
 EOF;