Using font display when importing typekit url

Question

I am getting a warning on Pagespeed,

Ensure text remains visible during webfont load

I've had a look on fixing this issue and people online have said to ensure the font declaration block has the font-display: fallback argument in it, but i'm loading in my font via typekit like so

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

How can I apply the font-display: fallback argument to my font when its being loaded via the above method, to stop pagespeed complaining about it?

Answer 1

Here's some info on it that I found when I was fixing my font-display for locally served fonts. It basically says that there is no such solution today as Typekit controls the @font-face that is served but do read the article.

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

Answer 2

When using JS version of typekit, I came up with this hack (my font name is 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;
})();