How to add `rel="preload"` to fonts

sage
,
2

You need to use the asset function to read the manifest to determine the hash. See:

This is how I’m adding preload to fonts on the Roots site:

add_action('wp_head', function () {
    $fonts = [
        'dankmono-regular',
        'public-sans-v11-latin-300',
        'public-sans-v11-latin-700',
        'public-sans-v11-latin-700italic',
        'public-sans-v11-latin-italic',
        'public-sans-v11-latin-regular',
    ];
    foreach ($fonts as $font) {
        echo '<link rel="preload" href="'.esc_url(asset('fonts/'.$font.'.woff2')).'" as="font" type="font/woff2" crossorigin>';
    }
});
2 Likes