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.

Report · Nov 28, 2022

I think the confusion on this thread is that people are trying to preload the stylesheet as a font. In other words this:

Is incorrect.

The correct code would be to use the adobe provided CSS:

But preload the specific fonts that are used above-the-fold on the page. However, this is where things get tricky. The individaul fonts are included via font-face in the https://use.typekit.net/xxxxxx.css stylesheet. For example:

@Blissful_help0D4E-face {
font-family:"aviano-future";
src:url("https://use.typekit.net/af/xxxxxx/xxxxxx/xxxxxx/l?primer=xxxxxx&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/xxxxxx/xxxxxx/xxxxxx/d?primer=xxxxxx&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/xxxxxx/xxxxxx/xxxxxx/a?primer=xxxxxx&fvd=n4&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}

So you'd need to preload the individual font, like:

However I would be suprised if that font URL is static and doesn't change, in which case the preload would become useless if it does. If anyone wants to do a long term test let me know. Also note I'm just using the woff2 preload for modern browsers.

It's also worth preconnecting to the origins:

(apologies for not using code formatting the Adobe WYSIWYG button for it is not working for me).

Report · Dec 06, 2022

Thanks for the explanation, that makes sense. Hopefully Adobe will come up with a more performant way to handle this.

Report · May 29, 2023

This works:

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

You dont need crossorigin

Report · May 29, 2023

This thread is about font preloading:

https://web.dev/codelab-preload-web-fonts/

so that code doesn't really solve it unfortunately.

Report · May 29, 2023

Oh you were correcting this in my code?

you are right about that

Report · May 30, 2023

Just correcting my previous code snippet above since I didnt see a way to go back and edit it after posted. Adding this first line improved my lighthouse performance from a 93 to a 96.

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

"The rel="preconnect" attribute tells the browser to establish a connection to the specified URL before it needs to load the resource (the typekit css file). This can help to improve the performance of your website by reducing the time it takes to load resources." Google Bard

Report · May 30, 2023

As far as I know it isnt necessary to load or preload a font since that is why we are have type "kits" from Adobe that do it for us. Right? You only need to load your fonts when you are downloading them and serving the font files from your local source (with your site files on your computer or wherever).

Report · May 30, 2023

ps if there is any FOUT on the site I just tried this preconnect on, its pretty much imperceptible to me now.. so maybe it would solve the problem for @ShawnB to try this...

Report · May 30, 2023

The font preloading is to prevent FOUT, yes, for fonts that are required above-the-fold as they say. From this post:

However, when using external stylesheets, preloading the most important fonts can be very effective since the browser will not otherwise discover whether the font is needed until much later.

So I think it is still recommended but you can see from that post there are still caveats and should be done strategically. We've used it to prevent FOUT with Adobe Fonts and Google Fonts to success, but if you're not seeing FOUT I think it would probably not be worth it for the reason that post says:

Although preload is highly effective at making fonts discoverable early in the page load process, this comes at the cost of taking away browser resources from the loading of other resources.