WordPress.org

Make WordPress Core

Opened 5 weeks ago

Closed 5 days 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:

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 5 weeks 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 5 weeks 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 5 weeks 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
5 weeks ago

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

#1 @flixos90
5 weeks 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 weeks 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
5 weeks 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 weeks 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
5 weeks 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
2 weeks 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 days 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
5 days 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
5 days 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.