WordPress.org

Make WordPress Core

Opened 7 months ago

Closed 6 months ago

#47282 closed enhancement (fixed)

Use font-display for Google Fonts in core themes

Reported by: westonruter Owned by: westonruter
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:
PR Number:

Description

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.

Attachments (3)

47282.1.diff (4.3 KB) - added by westonruter 7 months ago.
Use font-display:swap for Google Fonts in core themes: https://github.com/westonruter/wordpress-develop/pull/1
47282.2.diff (4.9 KB) - added by westonruter 7 months ago.
Also use display=swap for Open Sans Δ https://github.com/westonruter/wordpress-develop/pull/1/commits/25fddd967940a8b6ffbaa10af9920e1e4d798e67
47282.3.diff (4.9 KB) - added by westonruter 7 months ago.
Switch from swap to fallback Δ https://github.com/westonruter/wordpress-develop/pull/1/commits/5aeb0f5852c78a75844f3dd32de609da181694ef

Download all attachments as: .zip

Change History (12)

@westonruter
7 months ago

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

#1 @flixos90
7 months ago

  • Milestone changed from Awaiting Review to 5.3
  • Owner set to flixos90
  • Status changed from new to reviewing

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

#2 @swissspidy
7 months ago

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.

#3 @superpoincare
7 months ago

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?

#4 @westonruter
7 months ago

@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 );

#5 @superpoincare
7 months ago

@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.

#6 @flixos90
6 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

#7 @superpoincare
6 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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

Reopening.

#8 @westonruter
6 months ago

  • Owner changed from flixos90 to westonruter
  • Status changed from reopened to assigned

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

    a b function twentytwelve_get_font_url() { 
    165165                }
    166166
    167167                $query_args = array(
    168                         'family'  => urlencode( 'Open+Sans:400italic,700italic,400,700' ),
     168                        'family'  => urlencode( 'Open Sans:400italic,700italic,400,700' ),
    169169                        'subset'  => urlencode( $subsets ),
    170170                        'display' => urlencode( 'fallback' ),
    171171                );

#9 @westonruter
6 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 45525:

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

Amends [45485].
Fixes #47282.

Note: See TracTickets for help on using tickets.