Trying to implement rel="preload" for Typekit but it doesn't seem to work

Report · Jan 23, 2020

I'm trying to implement the preload technique here:

https://blog.typekit.com/2017/09/05/improving-your-web-font-performance/

But Chrome's browser console is showing this error:

"The resource https://use.typekit.net/xxxxx.css was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally."

This is what is in my <head>:

(obviously the typekit ID is not shown here)

Any ideas?

I tried the preload with "as='style'" but that didn't work.

Report · Feb 26, 2020

Has anyone gotten this to work?

Report · Feb 26, 2020

I had this exact problem today and tried using `rel="preload"` without any success. The only thing that works reliably is using a hidden div applied with the desired preloaded font style.

The problem for me was, I was using a certain font weight for a hover state that wasn't used anywhere else on the page. This resulted in a millisecond flash where the text would disappear then appear again with the right font weight loaded.

Ofc this is not ideal so had to come up with a solution.

Here is my code for reference:

The following is located in the footer:

<div class="font-preload" aria-hidden="true">
Lorem ipsum
</div>

...and the accompanying CSS:

.font-preload {
opacity: 0;
visibility: hidden;
height: 0;
overflow: hidden;
font-weight: 900;
}

Yeah it's a bit hacky but it's the only solution that works across all browsers. Hope it helps yall!

Report · Mar 02, 2020

I use the font on my page but can not load it like this

Report · Jul 24, 2020

Can't delete my reply, edited version below.

Report · May 05, 2020

Same here, been trying to figure out how to preload fonts from Typekit, and nothing seems to work. Should we preload and use font files located in the CSS directly (.woff etc)? Any answer from Adobe would be great.

Report · Jul 24, 2020

I'm trying the adding a hidden div method suggested below, but it doesn't seem to be working unfortunately. In my case, the correct font family is displayed, but not the correct font weight. I have it set to 200 but it looks like 400 on the page. Interestingly, my font inspector plugin thinks the correct weight is showing.

Also still getting the warning in the console.

With...

<link rel="preload" href="https://use.typekit.net/xxxx.css" as="style" crossorigin>

With regular embed, but all other code unchanged..

<link rel="stylesheet" href="https://use.typekit.net/xxxx.css">

Report · Aug 04, 2021

Any response to this?

Report · Jan 21, 2022

See? This is why everyone just uses Google Fonts for web projects even though most of them are generic and overpublished. Two years later and still no answer, much less any guidance from Adobe. Smh.

Adobe Support Community

Trying to implement rel="preload" for Typekit but it doesn't seem to work