Link preload for fonts without plugin. WordPress code example

Fonts preload is used to preload fonts on a web page. This allows the browser to start loading fonts in advance, even before they are needed to display the text on the page. This can improve performance and page loading speed, as fonts will be available immediately when they are needed to display content. This is especially useful for sites with a large amount of text content or using non-standard fonts.

This code downloads the Mulish Regular and Mulish Bold fonts for use on the site. The typecore_fonts_preload() function outputs two references to WOFF2 font files that are loaded as a preload using the rel=”preload” attribute. A function is then added to the wp_head hook with priority 5 so that the font references are added to the main page section.

Add this code to yours functions.php file and chance fonts path:

function typecore_fonts_preload() {
	echo '<link href="' . get_template_directory_uri() . '/fonts/mulish-regular.woff2" rel="preload" as="font" type="font/woff2" crossorigin>';
	echo '<link href="' . get_template_directory_uri() . '/fonts/mulish-bold.woff2" rel="preload" as="font" type="font/woff2" crossorigin>';
}

add_action( 'wp_head', 'typecore_fonts_preload', 5 );