Use font-display for Google Fonts in core themes

[westonruter]

Google Fonts just landed a ​long-requested ability to specify the font-display property for the @font-face rules they serve. This allows fonts to be served with font-display:swap which prevents FOIT (Flash Of Invisible Text) on slow connections. Given that the core themes have fallback fonts in place for when the Google Font is not available, it seems they should certainly opt for swap or fallback. For more info, see ​`font-display` for the Masses and ​avoiding invisible text during font loading.

[westonruter]

Use font-display:swap for Google Fonts in core themes: ​https://github.com/westonruter/wordpress-develop/pull/1

[westonruter]

Also use display=swap for Open Sans Δ ​https://github.com/westonruter/wordpress-develop/pull/1/commits/25fddd967940a8b6ffbaa10af9920e1e4d798e67

[flixos90]

Makes sense, this is an easy win we can do for 5.3. Looping in @laurelfulford on this.

[swissspidy]

I lean towards using fallback instead of swap for better UX. See ​https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display#Values for differences.

[westonruter]

Switch from swap to fallback Δ ​https://github.com/westonruter/wordpress-develop/pull/1/commits/5aeb0f5852c78a75844f3dd32de609da181694ef

[superpoincare]

Some themes don't have the function as pluggable. Maybe you could make them so that it can be changed in the child theme easily?

[westonruter]

@superpoincare as long as the stylesheets are enqueued properly, then you can just amend the URL of the registered stylesheet. For example:

<?php
add_action( 'wp_enqueue_scripts', function()  {
        $handle = 'my-google-font-stylesheet';
        if ( ! wp_style_is( $handle, 'registered' ) ) {
                return;
        }
        wp_styles()->registered[ $handle ]->src = add_query_arg(
                'display',
                'fallback',
                wp_styles()->registered[ $handle ]->src
        );
}, 100 );

[superpoincare]

@westonruter

True.

Actually a simpler solution is to use the filter style_loader_src and use str_replace. Or just use wp_enqueue_style with the preferred url, since it doesn't override and the child functions.php loads first.

But I was just aiming for giving more flexibility for users.

Anyway there are enough flexibilities already, so it's not necessary to make the function pluggable.

[flixos90]

In 45485:

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.

[superpoincare]

This seems working for all themes except Twenty Twelve where it's giving a 404.

Reopening.

[westonruter]

Good catch. The + is getting double-encoded. I'll commit this patch (as I need to dust off my commit!):

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

@@ -165 +165 @@
                 }
 
                 $query_args = array(
-                        'family'  => urlencode( 'Open+Sans:400italic,700italic,400,700' ),
+                        'family'  => urlencode( 'Open Sans:400italic,700italic,400,700' ),
                         'subset'  => urlencode( $subsets ),
                         'display' => urlencode( 'fallback' ),
                 );

[westonruter]

In 45525:

Bundled Theme: Fix malformed Google Font URL for Twenty Twelve due to double-encoding of +

Amends [45485].
Fixes #47282.