Add "&display: swap" to the google fonts request

Author

Posts
March 13th, 2020 at 10:33 #99853
ianakarina
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
March 13th, 2020 at 20:05 #99953
ianakarina
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;
```
March 18th, 2020 at 19:09 #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.

June 2nd, 2020 at 21:12 #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

June 4th, 2020 at 21:21 #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.

June 5th, 2020 at 04:02 #103647

John Hoke
Power User

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

Posts

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

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