Function for preloading fonts. WordPress code example

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 );

The rel=”preload” attribute is used to load resources (for example, fonts) before they are used on the page. This allows you to speed up the loading of the page, since the browser loads resources in advance, and not at the moment when they are needed.

For fonts that are used on the site, this can be especially useful, as fonts can be quite large files that can slow down page loading. Using the rel=”preload” attribute for fonts allows you to load them in advance, which speeds up page loading and improves the user experience.

This function preloads the Mulish Regular and Mulish Bold fonts. It displays two links to these fonts using the rel, as, type and crossorigin attributes. Then the function is added to the wp_head hook with priority 5.

Steps to run the code:

1. Creating the typecore_fonts_preload function.
2. Using the echo function to display links to Mulish Regular and Mulish Bold fonts.
3. Using the get_template_directory_uri function to get a link to the template directory.
4. Adding rel, as, type and crossorigin attributes for each link.
5. Adding the typecore_fonts_preload function to the wp_head hook with priority 5.