Make WordPress Core

Changeset 55314


Ignore:
Timestamp:
02/13/2023 02:31:06 PM (16 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:

Follow-up to [53282].

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

Location:
trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/script-loader.php

    r55279 r55314  
    35213521     *
    35223522     * @since 6.0.0
     3523     * @since 6.2.0 Removed local() CSS.
    35233524     *
    35243525     * @param string $font_family Font family.
     
    35273528     */
    35283529    $fn_compile_src = static function( $font_family, array $value ) {
    3529         $src = "local($font_family)";
     3530        $src = '';
    35303531
    35313532        foreach ( $value as $item ) {
     
    35423543                : ", url('{$item['url']}') format('{$item['format']}')";
    35433544        }
     3545
     3546        $src = ltrim( $src, ', ' );
    35443547
    35453548        return $src;
  • trunk/tests/phpunit/tests/webfonts/wpThemeJsonWebfontsHandler.php

    r55086 r55314  
    7777     * @ticket 55567
    7878     * @ticket 46370
     79     * @ticket 57430
    7980     */
    8081    public function test_font_face_generated_from_themejson() {
     
    8384        $expected = <<<EOF
    8485<style id='wp-webfonts-inline-css' type='text/css'>
    85 @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;}
     86@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;}
    8687</style>
    8788EOF;
Note: See TracChangeset for help on using the changeset viewer.