Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#47282 closed enhancement (fixed)

Use font-display for Google Fonts in core themes

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


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 5 years ago.
Use font-display:swap for Google Fonts in core themes:
47282.2.diff (4.9 KB) - added by westonruter 5 years ago.
Also use display=swap for Open Sans Δ
47282.3.diff (4.9 KB) - added by westonruter 5 years ago.
Switch from swap to fallback Δ

Download all attachments as: .zip

Change History (12)

5 years ago

Use font-display:swap for Google Fonts in core themes:

#1 @flixos90
5 years 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
5 years ago

I lean towards using fallback instead of swap for better UX. See for differences.

#3 @superpoincare
5 years 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
5 years ago

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

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

#5 @superpoincare
5 years ago



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
5 years 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
5 years 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.


#8 @westonruter
5 years 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                }
    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
5 years 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.