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 Team

    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 read the available documentation and search the forums before posting.
Viewing 3 posts - 1 through 3 (of 3 total)

You need to log in to reply to this topic.