Caricare un font personalizzato con rel="preload"

Question

Caricare un font personalizzato con rel="preload"

29 nov 2019, 11:23:31

Visualizzazioni: 18.4K

Voti: 8

Sto utilizzando un font personalizzato sul mio sito WordPress. Attualmente è incluso con l'attributo CSS @font-face. Ma mi chiedo se ci sia un modo per wp_enqueue questo file con l'attributo rel="preload" e magari altri attributi. In modo che nel browser appaia così:

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

Grazie in anticipo.

eulu

81

wp enqueue script wp enqueue style fonts

Tutte le risposte alla domanda

Commenti

Funziona ma devi specificare il numero di argomenti in add_filter: add_filter('style_loader_tag', 'my_style_loader_tag_filter', 10, 2);

jhob101

7 set 2020 14:24:44

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

Potresti provare a utilizzare il filtro 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;
}

Qui stiamo accodando il foglio di stile utilizzando la normale funzione wp_enqueue_style. Successivamente catturiamo l'output utilizzando il filtro e sostituiamo il suo attributo rel con i tuoi attributi aggiornati.

DanLewis

91

29 nov 2019 15:57:52