Faster loading of Global Typography Google Font #3467

Currently if you use a Google Font in the Global Typography, and inside a block (e.g. Text block), both are always loaded in the footer of the site - which makes the font load slower.

Change this so that

• Google Fonts used in the Global Typography are loaded in the head using best practices
• Google Fonts used in the blocks (and not yet loaded from the Global Typography) will be loaded in the footer like the current implementation

Implementation

All Google Fonts are currently enqueued in src/fonts.php register_font() function, and performed in the wp_footer hook. We need to change this implementation so that we will enqueue Google Fonts 2 times:

1. Early calls to register_font() will load the Google Fonts in the <head> tag with preloading

Here's how to preload:

public function preload_filter( $html, $handle ) {
	if ( $handle === 'stackable-google-fonts' ) { // Preload only this handle
		$fallback = '<noscript>' . $html . '</noscript>';
		$preload = str_replace( "rel='stylesheet'", "rel='preload' as='style' onload='this.onload=null;this.rel=\"stylesheet\"'", $html );
		$html = $preload . $fallback;
	}
	return $html;
}

2. Later calls (after the <head>) is called, fonts will be loaded in the footer normally (without preloading)