Leveraging font display functionality while incorporating a Typekit URL

Pagespeed is giving me a warning,

Make sure text remains visible during webfont load

I have been researching how to fix this problem and I found people suggesting to include the font-display: fallback argument in the font declaration block. However, I am loading my font through typekit like this

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

Is there a way to add the font-display: fallback argument to the font when using the above method, in order to prevent Pagespeed from flagging it?

csssasspagespeedtypekit

Answer №1

After implementing the JS version of Typekit, I devised a clever workaround for optimizing font display (utilizing my custom font name proxima-nova):

(function () {
    if (typeof MutationObserver === 'undefined') {
        return;
    }
    var enhanceFontRendering = function () {
        // Integrate 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++) {
            enhanceFontRendering();
        }
    });
    observer.observe(
        document.getElementsByTagName('head')[0],
        {attributes: false, childList: true, subtree: false}
    );
    window.fontEnhancementObserver = observer;
})();

Answer №2

When I was working on fixing my locally served fonts, I came across some interesting information about the font-display property. It seems that there is currently no solution available as Typekit controls the @font-face being served. However, I highly recommend reading the full article for more details.

Check out this article for more insights!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure that the div elements fully occupy the remaining space within the box

I'm looking to bring this idea to life: https://i.sstatic.net/SWytj.png Most of my work is complete, but I need the boxes to fill up all available space in the row. This is the HTML code I've used with Bootstrap. How can I achieve this? < ...

htmlcssbootstrap-5

Text on Bootstrap buttons does not adapt to different screen sizes

https://i.sstatic.net/9Hc9w.png I've been struggling to make the button text responsive, but all my attempts have failed. Below is the HTML code I've been using: <button style="margin-top : 5px;" type="submit" class="btn btn-primary ...

csshtmltwitter-bootstrap

A distinct vertical line separating two buttons

I'm currently working on an Angular 2 app using Angular material. I have two buttons labeled "sign in" and "sign up", and I'm trying to add a vertical line between them. Despite looking at various examples online, I haven't been successful i ...

htmlcss

I am struggling to properly align the login form in the center of the login page

Can someone please assist me in centering the login form on the login page? I've attempted using align-items-center and justify-content-center but it's still aligning at the top. Any help would be greatly appreciated as I've spent a signific ...

htmlcssbootstrap-4

Learn how to create text animations using CSS triggered by a scroll event listener

I'm looking to create a text animation similar to the one on this website: They have 3 keyframes for two types of animations: Left to Right and Right to Left. The RTL animation starts at 164vh, while LTR starts at -200vh. These text animations only ...

javascriptcssreactjsnext.js

Breaking a line within a list item will create additional spacing between the lines

Is there a way to break a line <br/> inside a <li> tag? For example: First line second line Second list item Third list item I've tried setting margin and padding to 0, but I still get an unwanted space between the lines. Any suggesti ...

htmlcss

What causes the fixed div to appear when scrolling horizontally?

I have replicated this issue in a live example: http://jsfiddle.net/pda2yc6s When scrolling vertically, a specific div element sticks to the top. However, if the window is narrower than the wrapper's width and you scroll horizontally, the sticky elem ...

javascriptjquerycss

How can I make multiple elements change color when hovering with CSS?

Hey there! I have a little design challenge that I need help with. On my website (), I am trying to make multiple elements of a specific item change color when the user hovers over the text. If you hover over the "more" menu item, you'll notice that o ...

javascriptjqueryhtmlcsshover

What is the best way to ensure that the same information is included on every page of

Currently developing a dynamic website where certain components such as the fixed header, menubar, and footer are common across multiple pages. What is the best way to include these fixed components on every webpage? I am utilizing JSP and JavaScript for ...

javascripthtmlcssjsp

Unveiling the Technique: Adjusting Field Visibility When Dropdown is Altered

I tried to find a solution on Stackoverflow for displaying/hiding a field based on dropdown selection using either jQuery or inline JavaScript. However, I am facing difficulties when implementing this within a table. Let's start with an easy approach ...

javascriptjqueryhtmlcss

Steps to position a dropdown within a panel while keeping the dropdown content visible using an anchor tag

I'm struggling to display a dropdown menu within a panel without it being hidden. I was advised to use position:absolute in the dropdown's css, but that solution isn't working for me. I need the dropdown to appear on hover over the anchor t ...

htmlcssbootstrap-4

What could be causing this navigation item to vanish in Firefox?

Check out this link: http://jsfiddle.net/Nvntm/1/ In Firefox and some other browsers, the "Support" navigation item disappears while the other three remain. Why does this happen? Is there something incorrect in my code? ...

htmlcsscross-browser

Issue with displaying Bootstrap 3 dropdown menus

I've been experimenting with the latest Bootstrap 3 and everything seems to be working well, except for the dropdowns I'm trying to create. Please let me know if anyone has any insights into what I might be doing incorrectly. Here is the code I&a ...

htmlcsstwitter-bootstrap

The art of positioning in menu - absolute versus relative

Struggling with positioning absolute divs is a common challenge for many of us. In my case, it's horizontal sub-menus with the following CSS: ul.children{ display:none; position:absolute; } ul.children li{ position:relative; height:60px; float:none; ...

htmlcss

Graphic selectors: a new take on radio buttons

I've been attempting to make this work, but it's not functioning correctly. Below is the CSS code: .input_hidden { position: absolute; left: -9999px; } .selected { background-color: #000000; } #carte label { display: inline-bl ...

javascripthtmljquerycssradio-button

Arranging pictures in both vertical and horizontal alignment (CSS)

I've been attempting various methods to solve this issue, but none have proven successful. My goal is quite simple: align images both horizontally and vertically in a manner that fills empty spaces with photos. Similar to the layout here: The challe ...

htmlcss

What is the best way to link buttons to specific drop down sections?

How can I create multiple drop down divs with different content for each button click? JSFiddle: http://jsfiddle.net/maddiwu/xe6xtfqh/ .slide { overflow-y: hidden; max-width: 100%; overflow-x: hidden; max-height: 100vw; /* approximate ...

javascripthtmlcss

Determine who the creator of the clicked div is

I'm sorry if my explanation is a bit difficult to comprehend. Here is the code snippet in question: names.push(newName); var strName = newName; var newName = document.createElement('p') newName.setAttribute('id', newName); documen ...

javascriptjqueryhtmlcssarrays

Utilizing CSS-in-JS to eliminate arrow buttons from a TextField

I'm currently developing a webpage using React and Material-UI. One of the components I have is a TextField element, and I need to remove the arrow buttons that typically appear on number input fields. If I were utilizing CSS, I could easily achieve t ...

javascriptcssreactjsmaterial-uireact-with-styles

Searching for a way to smoothly scroll horizontally from right to left using the mouse wheel?

I am looking to display 3 out of my collection of over 6 articles, with the ability for the user to scroll from right to left when using the mouse wheel. Additionally, I want to hide the scrollbar for a cleaner look. Can anyone assist me with this? I hav ...

jqueryhtmlcsshorizontal-scrollingmousewheel