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.

Built from https://develop.svn.wordpress.org/trunk@45485


git-svn-id: http://core.svn.wordpress.org/trunk@45296 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Felix Arntz 2019-05-31 10:10:54 +00:00
parent 0d40c54f9b
commit 3c40573f77
8 changed files with 20 additions and 14 deletions

View File

@ -331,8 +331,9 @@ if ( ! function_exists( 'twentyfifteen_fonts_url' ) ) :
if ( $fonts ) { if ( $fonts ) {
$fonts_url = add_query_arg( $fonts_url = add_query_arg(
array( array(
'family' => urlencode( implode( '|', $fonts ) ), 'family' => urlencode( implode( '|', $fonts ) ),
'subset' => urlencode( $subsets ), 'subset' => urlencode( $subsets ),
'display' => urlencode( 'fallback' ),
), ),
'https://fonts.googleapis.com/css' 'https://fonts.googleapis.com/css'
); );

View File

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

View File

@ -294,8 +294,9 @@ function twentyseventeen_fonts_url() {
$font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i'; $font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i';
$query_args = array( $query_args = array(
'family' => urlencode( implode( '|', $font_families ) ), 'family' => urlencode( implode( '|', $font_families ) ),
'subset' => urlencode( 'latin,latin-ext' ), 'subset' => urlencode( 'latin,latin-ext' ),
'display' => urlencode( 'fallback' ),
); );
$fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' ); $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );

View File

@ -331,8 +331,9 @@ if ( ! function_exists( 'twentysixteen_fonts_url' ) ) :
if ( $fonts ) { if ( $fonts ) {
$fonts_url = add_query_arg( $fonts_url = add_query_arg(
array( array(
'family' => urlencode( implode( '|', $fonts ) ), 'family' => urlencode( implode( '|', $fonts ) ),
'subset' => urlencode( $subsets ), 'subset' => urlencode( $subsets ),
'display' => urlencode( 'fallback' ),
), ),
'https://fonts.googleapis.com/css' 'https://fonts.googleapis.com/css'
); );

View File

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

View File

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

View File

@ -1919,7 +1919,7 @@ function wp_default_styles( &$styles ) {
} }
// Hotlink Open Sans, for now // 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";
} }
// Register a stylesheet for the selected admin color scheme. // Register a stylesheet for the selected admin color scheme.

View File

@ -13,7 +13,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '5.3-alpha-45484'; $wp_version = '5.3-alpha-45485';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.