Changeset 45485

Timestamp:

05/31/2019 10:09:39 AM (7 years ago)

Author:

flixos90

Message:

Bundled Theme: Load Google fonts with display=fallback parameter for better UX in case the font cannot be loaded.

Providing this query parameter ensures the stylesheet contains the font-display: fallback rule. This changeset also updates the Open Sans font used by core accordingly.

Props westonruter.
Fixes #47282.

Location:

trunk/src

Files:

• wp-content/themes/twentyfifteen/functions.php (modified) (1 diff)
• wp-content/themes/twentyfourteen/functions.php (modified) (1 diff)
• wp-content/themes/twentyseventeen/functions.php (modified) (1 diff)
• wp-content/themes/twentysixteen/functions.php (modified) (1 diff)
• wp-content/themes/twentythirteen/functions.php (modified) (1 diff)
• wp-content/themes/twentytwelve/functions.php (modified) (1 diff)
• wp-includes/script-loader.php (modified) (1 diff)

trunk/src/wp-content/themes/twentyfifteen/functions.php

@@ -332 +332 @@
                         $fonts_url = add_query_arg(
                                 array(
-                                        'family' => urlencode( implode( '|', $fonts ) ),
-                                        'subset' => urlencode( $subsets ),
+                                        'family'  => urlencode( implode( '|', $fonts ) ),
+                                        'subset'  => urlencode( $subsets ),
+                                        'display' => urlencode( 'fallback' ),
                                 ),
                                 'https://fonts.googleapis.com/css'

trunk/src/wp-content/themes/twentyfourteen/functions.php

@@ -295 +295 @@
         if ( 'off' !== _x( 'on', 'Lato font: on or off', 'twentyfourteen' ) ) {
                 $query_args = array(
-                        'family' => urlencode( 'Lato:300,400,700,900,300italic,400italic,700italic' ),
-                        'subset' => urlencode( 'latin,latin-ext' ),
+                        'family'  => urlencode( 'Lato:300,400,700,900,300italic,400italic,700italic' ),
+                        'subset'  => urlencode( 'latin,latin-ext' ),
+                        'display' => urlencode( 'fallback' ),
                 );
                 $font_url   = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );

trunk/src/wp-content/themes/twentyseventeen/functions.php

@@ -295 +295 @@
 
                 $query_args = array(
-                        'family' => urlencode( implode( '|', $font_families ) ),
-                        'subset' => urlencode( 'latin,latin-ext' ),
+                        'family'  => urlencode( implode( '|', $font_families ) ),
+                        'subset'  => urlencode( 'latin,latin-ext' ),
+                        'display' => urlencode( 'fallback' ),
                 );
 

trunk/src/wp-content/themes/twentysixteen/functions.php

@@ -332 +332 @@
                         $fonts_url = add_query_arg(
                                 array(
-                                        'family' => urlencode( implode( '|', $fonts ) ),
-                                        'subset' => urlencode( $subsets ),
+                                        'family'  => urlencode( implode( '|', $fonts ) ),
+                                        'subset'  => urlencode( $subsets ),
+                                        'display' => urlencode( 'fallback' ),
                                 ),
                                 'https://fonts.googleapis.com/css'

trunk/src/wp-content/themes/twentythirteen/functions.php

@@ -244 +244 @@
 
                 $query_args = array(
-                        'family' => urlencode( implode( '|', $font_families ) ),
-                        'subset' => urlencode( 'latin,latin-ext' ),
+                        'family'  => urlencode( implode( '|', $font_families ) ),
+                        'subset'  => urlencode( 'latin,latin-ext' ),
+                        'display' => urlencode( 'fallback' ),
                 );
                 $fonts_url  = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );

trunk/src/wp-content/themes/twentytwelve/functions.php

@@ -166 +166 @@
 
                 $query_args = array(
-                        'family' => 'Open+Sans:400italic,700italic,400,700',
-                        'subset' => $subsets,
+                        'family'  => urlencode( 'Open+Sans:400italic,700italic,400,700' ),
+                        'subset'  => urlencode( $subsets ),
+                        'display' => urlencode( 'fallback' ),
                 );
                 $font_url   = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );

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

@@ -1920 +1920 @@
 
                 // Hotlink Open Sans, for now
-                $open_sans_font_url = "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=$subsets";
+                $open_sans_font_url = "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=$subsets&display=fallback";
         }