Google Fonts Loader Generator

<?php
/**
 * Web fonts.
 */

/**
 * Builds the stylesheet URL.
 *
 * One request for every family: css2 takes repeated family parameters, and
 * each extra request costs a round trip before any text can be painted.
 *
 * @return string
 */
function my_theme_fonts_url() {
	$families = array(
		'Inter:wght@400;600',
	);

	// Spaces in a family name are plus signs in the URL.
	$families = array_map(
		static function ( $family ) {
			return str_replace( ' ', '+', $family );
		},
		$families
	);

	return 'https://fonts.googleapis.com/css2?family=' . implode( '&family=', $families ) . '&display=swap';
}

/**
 * Enqueues the fonts on the front end.
 */
function my_theme_fonts() {
	// null version: the URL already carries everything that identifies it,
	// and a ?ver= query on a third-party stylesheet only breaks caching.
	wp_enqueue_style( 'my-theme-fonts', my_theme_fonts_url(), array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_theme_fonts' );

/**
 * Preconnects to both font hosts.
 *
 * The CSS comes from fonts.googleapis.com and the font files from
 * fonts.gstatic.com, which is a second connection and needs crossorigin.
 *
 * @param array  $urls          Hints for this relation.
 * @param string $relation_type The relation.
 * @return array
 */
function my_theme_fonts_preconnect( $urls, $relation_type ) {
	if ( 'preconnect' !== $relation_type ) {
		return $urls;
	}

	$urls[] = 'https://fonts.googleapis.com';
	$urls[] = array(
		'href'        => 'https://fonts.gstatic.com',
		'crossorigin' => 'anonymous',
	);

	return $urls;
}
add_filter( 'wp_resource_hints', 'my_theme_fonts_preconnect', 10, 2 );

/**
 * Loads the same fonts inside the editor.
 *
 * Without this the editor renders your content in a different typeface, so
 * line lengths and spacing decisions made there do not match the front end.
 */
function my_theme_fonts_editor() {
	add_editor_style( my_theme_fonts_url() );
}
add_action( 'after_setup_theme', 'my_theme_fonts_editor' );