Подключение пользовательского шрифта с rel="preload"

Question

Подключение пользовательского шрифта с rel="preload"

29 нояб. 2019 г., 11:23:31

Просмотры: 18.4K

Голосов: 8

Я использую пользовательский шрифт на своем сайте WordPress. Сейчас он подключается через атрибут CSS @font-face. Но мне интересно, есть ли способ подключить этот файл с помощью wp_enqueue с атрибутом rel="preload" и, возможно, другими атрибутами. Чтобы в браузере это выглядело примерно так:

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

Заранее спасибо.

eulu

81

wp enqueue script wp enqueue style fonts

Все ответы на вопрос

Комментарии

Это работает, но вам нужно указать количество аргументов в add_filter: add_filter('style_loader_tag', 'my_style_loader_tag_filter', 10, 2);

jhob101

7 сент. 2020 г. 14:24:44

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

Вы можете попробовать использовать фильтр 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;
}

Здесь мы подключаем таблицу стилей с помощью обычной функции wp_enqueue_style. Затем мы перехватываем вывод с помощью фильтра и заменяем его атрибут rel на обновлённые атрибуты.