Add “&display: swap” to the google fonts request

  • Author
    Posts
  • #99853

    Hi everybody
    I need to use the “&display=swap” URL parameter on the Google fonts request, as are described on https://www.tezify.com/how-to/font_display_for_google_fonts/

    So, on my DOM, where it says:
    <link rel='stylesheet' id='fluida-googlefonts-css' href='//fonts.googleapis.com/css?family=Open+Sans%7COpen+Sans+Condensed300%7COpen+Sans%3A400%7COpen+Sans+Condensed%3A300%2C300%7COpen+Sans%3A700%7COpen+Sans%3A300&ver=1.3.0' type='text/css' media='all' />

    Need it says something like:
    <link rel='stylesheet' id='fluida-googlefonts-css' href='//fonts.googleapis.com/css?family=Open+Sans%7COpen+Sans+Condensed300%7COpen+Sans%3A400%7COpen+Sans+Condensed%3A300%2C300%7COpen+Sans%3A700%7COpen+Sans%3A300&#038&display=swap;ver=1.3.0' type='text/css' media='all' />

    Maybe I could modify the functions that are in includes/styles.php to not use an external plugin, but I don´t know how. Any idea?

    // Enqueue google fonts with subsets separately
    	foreach( $gfonts as $i => $gfont ):
    		if ( strpos( $gfont, "&" ) === false):
    		   // do nothing
    		else:
    			wp_enqueue_style( 'fluida-googlefont' . $i, '//fonts.googleapis.com/css?family=' . $gfont, null, _CRYOUT_THEME_VERSION );
    			unset( $gfonts[$i] );
    			unset( $roots[$i] );
    		endif;
    	endforeach;
    
    	// Merged google fonts
    	if ( count( $gfonts ) > 0 ):
    		wp_enqueue_style( 'fluida-googlefonts', '//fonts.googleapis.com/css?family=' . implode( "|" , array_unique( array_merge( $roots, $gfonts ) ) ), null, _CRYOUT_THEME_VERSION );
    	endif;

    Website: eneagrama.personarte.com

    #99953

    Well, I managed to do it by myself, even though I’m not a programmer. It would be nice to add it in future updates.
    Thanks in advance!

    // Enqueue google fonts with subsets separately
    	foreach( $gfonts as $i => $gfont ):
    		if ( strpos( $gfont, "&" ) === false):
    		   // do nothing
    		else:
    			wp_enqueue_style( 'fluida-googlefont' . $i, '//fonts.googleapis.com/css?display=swap&family=' . $gfont, null, _CRYOUT_THEME_VERSION );
    			unset( $gfonts[$i] );
    			unset( $roots[$i] );
    		endif;
    	endforeach;
    
    	// Merged google fonts
    	if ( count( $gfonts ) > 0 ):
    		wp_enqueue_style( 'fluida-googlefonts', '//fonts.googleapis.com/css?display=swap&family=' . implode( "|" , array_unique( array_merge( $roots, $gfonts ) ) ), null, _CRYOUT_THEME_VERSION );
    	endif;
    #100187
    Zed
    Cryout Creations mastermind

    You can also try using the Google font identifier field to define the font name and append &display=swap to that name.


    If you like our creations, help us share by rating them on WordPress.org.
    Please check the available documentation and search the forums before starting a topic.
    #103549
    John Hoke
    Power User

    So if I am reading and groking the instructions correctly, if I want to use “Jost” from the Google Font library, I would change the dropdown to Custom and enter Jost&display=swap into the text box?

    Just making sure I’m looking in the right direction – just finished migrating to Fluida from another theme and made all the tweaks except for my typography and noted the themes do not include the display=swap when running PageSpeed

    Website: hoke.org/john

    #103638
    Zed
    Cryout Creations mastermind

    John, yes that’s almost correct, although you also need to include the font weights with the identifier (to force the theme to load that font family separately and keep the display=swap parameter), eg:
    Jost:100,200,300,400,500,600,700,800,900&display=swap


    If you like our creations, help us share by rating them on WordPress.org.
    Please check the available documentation and search the forums before starting a topic.
    #103647
    John Hoke
    Power User

    Zed – thanks … thats what I needed to get it workin 😉

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Add “&display: swap” to the google fonts request’ is closed to new replies.