Cum să încarci un fișier font personalizat cu rel="preload" în WordPress

Question

Cum să încarci un fișier font personalizat cu rel="preload" în WordPress

29 nov. 2019, 11:23:31

Vizualizări: 18.4K

Voturi: 8

Folosesc un font personalizat pe site-ul meu WordPress. Acesta este inclus momentan prin atributul CSS @font-face. Dar mă întreb dacă există vreo metodă să încarc acest fișier cu wp_enqueue folosind atributul rel="preload" și eventual alte atribute suplimentare. Astfel încât să apară în browser astfel:

<link rel="preload" href="/fonts/custom-font-folder/CustomFontFile.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Mulțumesc anticipat.

eulu

81

wp enqueue script wp enqueue style fonts

Toate răspunsurile la întrebare

Comentarii

Funcționează, dar trebuie să specifici numărul de argumente în add_filter: add_filter('style_loader_tag', 'my_style_loader_tag_filter', 10, 2);

jhob101

7 sept. 2020 14:24:44

DanLewis 91 · Answer 1 · 2019-11-29T15:57:52Z

Ai putea încerca să folosești filtrul style_loader_tag.

add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

function my_enqueue_scripts() {
    wp_enqueue_style('my-style-handle',
        '/fonts/custom-font-folder/CustomFontFile.woff2', array(), null);
}

add_filter('style_loader_tag', 'my_style_loader_tag_filter', 10, 2);

function my_style_loader_tag_filter($html, $handle) {
    if ($handle === 'my-style-handle') {
        return str_replace("rel='stylesheet'",
            "rel='preload' as='font' type='font/woff2' crossorigin='anonymous'", $html);
    }
    return $html;
}

Aici încărcăm fișierul de stil folosind funcția obișnuită wp_enqueue_style. Apoi interceptăm output-ul folosind filtrul și înlocuim atributul rel cu atributele actualizate.

DanLewis

91

29 nov. 2019 15:57:52