Использование отображения шрифта при импорте URL-адреса typekit

Я получаю предупреждение на Pagespeed,

Убедитесь, что текст остается видимым во время загрузки веб-шрифта

Я рассмотрел решение этой проблемы, и люди в Интернете сказали, что в блоке объявления шрифта есть аргумент font-display: fallback, но я загружаю свой шрифт через typekit, например так

 @import url("https://use.typekit.net/111111.css");

Как я могу применить аргумент font-display: fallback к моему шрифту, когда он загружается с помощью вышеуказанного метода, чтобы скорость страницы не жаловалась на него?


css sass pagespeed typekit
person S_R    schedule 28.02.2019    source источник

Ответы (2)


arrow_upward
2
arrow_downward

При использовании JS-версии typekit я придумал этот хак (название моего шрифта proxima-nova):

(function () {
    if (typeof MutationObserver === 'undefined') {
        return;
    }
    var fixFontDisplay = function () {
        // inject font-display option into typekit fonts
        var styles = document.getElementsByTagName('style');
        for (var i = 0; i < styles.length; i++) {
            if (
                styles[i].innerText
                && styles[i].innerText.indexOf('proxima-nova') !== -1
                && styles[i].innerText.indexOf('@font-face{font-display:swap;') === -1
            ) {
                styles[i].innerText = styles[i].innerText
                        .split('@font-face{').join('@font-face{font-display:swap;');
            }
        }
    };
    var observer = new MutationObserver(function (mutationsList, observer) {
        for (var i = 0; i < mutationsList.length; i++) {
            fixFontDisplay();
        }
    });
    observer.observe(
        document.getElementsByTagName('head')[0],
        {attributes: false, childList: true, subtree: false}
    );
    window.fixFontObserver = observer;
})();
person Ivan Ternovtsiy    schedule 02.10.2019

arrow_upward
1
arrow_downward

Вот некоторая информация об этом, которую я нашел, когда исправлял свой font-display для локально обслуживаемых шрифтов. По сути, это говорит о том, что сегодня такого решения нет, поскольку Typekit контролирует @font-face, которые обслуживаются, но прочтите статью.

https://css-tricks.com/font-display-masses/#article-header-id-4

person Peter Svegrup    schedule 28.02.2019