Cargar archivo de fuente personalizada con rel="preload"

Question

Cargar archivo de fuente personalizada con rel="preload"

29 nov 2019, 11:23:31

Vistas: 18.4K

Votos: 8

Estoy usando una fuente personalizada en mi sitio de WordPress. Actualmente está incluida con el atributo CSS @font-face. Pero me pregunto si hay alguna forma de usar wp_enqueue para este archivo con el atributo rel="preload" y quizás otros atributos. Para que se vea algo así en el navegador:

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

Gracias de antemano.

eulu

81

wp enqueue script wp enqueue style fuentes

Todas las respuestas a la pregunta

Comentarios

Eso funciona pero necesitas especificar el número de argumentos en 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

Podrías intentar usar el 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;
}

Aquí estamos encolando la hoja de estilos usando la función normal wp_enqueue_style. Luego capturamos la salida usando el filtro y reemplazamos su atributo rel con tus atributos actualizados.

DanLewis

91

29 nov 2019 15:57:52