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

Question

Я получаю предупреждение о скорости страниц,

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

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

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

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

Answer 1

При использовании 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;
})();

Answer 2

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

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