Inspiring

Question

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

Forum|Forum|6 years ago
January 23, 2020
6 replies
10173 views

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.

This topic has been closed for replies.

O

ortizl37976643

Participant

This works:

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

You dont need crossorigin

T

thomasb61223874

Participant

This thread is about font preloading:

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

so that code doesn't really solve it unfortunately.

T

thomasb61223874

Participant

Oh you were correcting this in my code?

you are right about that

T

thomasb61223874

Participant

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:

@11220649-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).

S

shawnbeelAuthor

Inspiring

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

K

killshot13

Participant

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.

phoenix & phoenix

Participating Frequently

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">

phoenix & phoenix

Participating Frequently

Any response to this?

jose.gomez

Participant

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.

D

D-Thrane

Participant

Has anyone gotten this to work?

monkmedia

Participant

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!

D

D-Thrane

Participant

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded