web vital issue causing render blocking issue while using typekit cdn

Forum|Forum|2 years ago
January 13, 2024
1 reply
3211 views

Does anyone know how to resolve this problem?

On my website, I'm using the Typekit fonts, however it's giving me an error and blocking the thread.

You cannot download CSS files that are referenced with @1552174 in other CSS files until the other CSS file has completely loaded. Rendering is delayed by these protracted render-blocking request chains.

This topic has been closed for replies.

L

Luke Leber

Participant

Hey! We're seeing the same thing and have opened https://community.adobe.com/t5/adobe-fonts-discussions/out-of-date-misleading-explanation-for-why-web-fonts-must-be-loaded-from-use-typekit-net/td-p/14349910

In the meantime, although this is a very imperfect solution, one can use a one-liner HTML / JS hack to remove font loading from the critical rendering path, at the cost of risking a regression in CLS.

<!-- This causes the CSS file to be interpreted as a "preload", then when it's loaded, the "onload" event changes the rel property to "stylesheet" so that the browser interprets it differently -->
<link href="https://use.typekit.net/xxxxxx.css" rel="preload" as="style" onload="this.rel='stylesheet'">